diff --git a/skills/documatica-v12-design-system/SKILL.md b/skills/documatica-v12-design-system/SKILL.md new file mode 100644 index 00000000..6ae862fe --- /dev/null +++ b/skills/documatica-v12-design-system/SKILL.md @@ -0,0 +1,373 @@ +--- +name: documatica-v12-design-system +description: "Premium design system for modern web applications. Features extreme rounded corners (3-4rem), blue-600 accent, gold AI indicators (#FBBF24), Inter font, generous whitespace. Components: buttons, inputs, cards, tables, modals, navigation, hero sections, pricing. Triggers on: create UI, design component, style form, make card, add button. 50+ ready-to-use component pairs (HTML+CSS)." +--- + +# Documatica v12.0 Design System + +Это официальная дизайн-система проекта Documatica. Используй этот skill для всех UI/UX задач. + +**ВАЖНО:** При создании UI-компонентов ОБЯЗАТЕЛЬНО читай референсные файлы из директории `references/` этого skill. + +--- + +## Библиотека компонентов (Reference Files) + +Полная библиотека готовых компонентов находится в `references/`. Читай соответствующий файл перед созданием компонента: + +| Компонент | HTML | CSS | +|-----------|------|-----| +| **Design Tokens** | - | [tokens.css](references/tokens.css) | +| **Buttons** | [buttons.html](references/buttons.html) | [buttons.css](references/buttons.css) | +| **Inputs** | [inputs.html](references/inputs.html) | [inputs.css](references/inputs.css) | +| **Cards** | [cards.html](references/cards.html) | [cards.css](references/cards.css) | +| **Tables** | [tables.html](references/tables.html) | [tables.css](references/tables.css) | +| **Modals** | [modals.html](references/modals.html) | [modals.css](references/modals.css) | +| **Navigation** | [navigation.html](references/navigation.html) | [navigation.css](references/navigation.css) | +| **Footer** | [footer.html](references/footer.html) | [footer.css](references/footer.css) | +| **Hero** | [hero.html](references/hero.html) | [hero.css](references/hero.css) | +| **Pricing** | [pricing.html](references/pricing.html) | [pricing.css](references/pricing.css) | +| **Testimonials** | [testimonials.html](references/testimonials.html) | [testimonials.css](references/testimonials.css) | +| **Stats** | [stats.html](references/stats.html) | [stats.css](references/stats.css) | +| **Alerts** | [alerts.html](references/alerts.html) | [alerts.css](references/alerts.css) | +| **Badges** | [badges.html](references/badges.html) | [badges.css](references/badges.css) | +| **Avatars** | [avatars.html](references/avatars.html) | [avatars.css](references/avatars.css) | +| **Checkboxes** | [checkboxes.html](references/checkboxes.html) | [checkboxes.css](references/checkboxes.css) | +| **Selects** | [selects.html](references/selects.html) | [selects.css](references/selects.css) | +| **Tabs** | [tabs.html](references/tabs.html) | [tabs.css](references/tabs.css) | +| **Accordion** | [accordion.html](references/accordion.html) | [accordion.css](references/accordion.css) | +| **Pagination** | [pagination.html](references/pagination.html) | [pagination.css](references/pagination.css) | +| **Progress** | [progress.html](references/progress.html) | [progress.css](references/progress.css) | +| **Timeline** | [timeline.html](references/timeline.html) | [timeline.css](references/timeline.css) | +| **Empty States** | [empty-states.html](references/empty-states.html) | [empty-states.css](references/empty-states.css) | +| **Error Pages** | [error-pages.html](references/error-pages.html) | [error-pages.css](references/error-pages.css) | +| **File Upload** | [file-upload.html](references/file-upload.html) | [file-upload.css](references/file-upload.css) | +| **Gallery** | [gallery.html](references/gallery.html) | [gallery.css](references/gallery.css) | +| **Sidebar** | [sidebar.html](references/sidebar.html) | [sidebar.css](references/sidebar.css) | +| **Chat** | [chat.html](references/chat.html) | [chat.css](references/chat.css) | +| **Comments** | [comments.html](references/comments.html) | [comments.css](references/comments.css) | +| **Reviews** | [reviews.html](references/reviews.html) | [reviews.css](references/reviews.css) | +| **Rating** | [rating.html](references/rating.html) | [rating.css](references/rating.css) | +| **Profile** | [profile.html](references/profile.html) | [profile.css](references/profile.css) | +| **Blog Article** | [blog-article.html](references/blog-article.html) | [blog-article.css](references/blog-article.css) | +| **Product** | [product.html](references/product.html) | [product.css](references/product.css) | +| **Cart** | [cart.html](references/cart.html) | [cart.css](references/cart.css) | +| **Checkout** | [checkout.html](references/checkout.html) | [checkout.css](references/checkout.css) | +| **Service Page** | [service-page.html](references/service-page.html) | [service-page.css](references/service-page.css) | +| **Typography** | [typography.html](references/typography.html) | [typography.css](references/typography.css) | +| **Colors** | [colors.html](references/colors.html) | [colors.css](references/colors.css) | +| **Icons** | [icons.html](references/icons.html) | [icons.css](references/icons.css) | +| **Grid** | [grid.html](references/grid.html) | [grid.css](references/grid.css) | +| **Containers** | [containers.html](references/containers.html) | [containers.css](references/containers.css) | +| **Dividers** | [dividers.html](references/dividers.html) | [dividers.css](references/dividers.css) | +| **Sliders** | [sliders.html](references/sliders.html) | [sliders.css](references/sliders.css) | +| **Datepicker** | [datepicker.html](references/datepicker.html) | [datepicker.css](references/datepicker.css) | +| **Social** | [social.html](references/social.html) | [social.css](references/social.css) | + +--- + +## Философия дизайна + +- **Экстремальные скругления** - никаких острых углов +- **Воздух** - много whitespace, большие паддинги +- **Минимализм** - только 2 акцентных цвета (blue + gold) +- **Типографика** - uppercase теги, черный font-weight для заголовков +- **БЕЗ эмодзи** - только SVG иконки (Heroicons, Lucide) + +--- + +## CSS Variables (Design Tokens) + +```css +:root { + --docu-blue: #3b82f6; + --docu-gold: #FBBF24; + --docu-dark: #0f172a; + --docu-base: #f1f5f9; + --docu-radius-max: 3rem; + --docu-radius-input: 1.5rem; + --docu-ink: #0f172a; /* slate-900 */ + --docu-body: #64748b; /* slate-500 */ + --docu-muted: #94a3b8; /* slate-400 */ +} +``` + +--- + +## Типографика + +| Элемент | Класс | Стили | +|---------|-------|-------| +| H1 Hero | `.docu-h1` | clamp(4rem, 12vw, 8rem), font-black, uppercase, tracking-tighter | +| H2 Section | `.docu-h2` | clamp(2.5rem, 6vw, 3.75rem), font-black, uppercase | +| H3 Card | `.docu-h3` | 1.5rem, font-black, uppercase | +| Tag Primary | `.docu-tag` | 10px, font-black, uppercase, tracking-[0.4em], blue-600 | +| Tag Muted | `.docu-tag-muted` | 10px, font-black, uppercase, tracking-[0.4em], slate-400 | +| Body | `.docu-body` | 1rem, font-medium, slate-500 | +| Lead | `.docu-lead` | 1.25rem, font-medium, slate-500 | +| Micro | `.docu-micro` | 9px, font-bold, uppercase, tracking-widest | + +--- + +## Геометрия + +| Элемент | Скругление | +|---------|------------| +| Секции, крупные контейнеры | `rounded-[3rem]` или `rounded-[4rem]` | +| Карточки, кнопки, инпуты | `rounded-2xl` или `rounded-[1.5rem]` | +| Таблицы | `rounded-[2.5rem]` | +| Чекбоксы | `rounded-lg` | + +**НИКОГДА:** `rounded-md`, `rounded-sm`, острые углы + +--- + +## Цветовая палитра + +| Назначение | Цвет | Tailwind | +|------------|------|----------| +| Бренд/Акцент | #3b82f6 | `blue-600` | +| AI/Системные | #FBBF24 | `docu-gold`, `yellow-400` | +| Фон страницы | #f1f5f9 | `slate-50` | +| Заголовки | #0f172a | `slate-900` | +| Основной текст | #64748b | `slate-500` | +| Muted текст | #94a3b8 | `slate-400` | +| Границы | #e2e8f0 | `slate-100` | + +--- + +## Кнопки + +### Primary Button +```html + +``` + +### Massive CTA +```html + +``` + +### AI Action (Gold) +```html + +``` + +### Ghost/Outline +```html + +``` + +--- + +## Формы + +### Контейнер формы +```html +
+ +
+``` + +### Поле ввода +```html +
+ + +
+``` + +### Checkbox +```html + +``` + +--- + +## Таблицы + +```html +
+ + + + + + + + + + + + + + + + + + + +
НаименованиеСумма
Услуга10 000 руб.
Итого10 000 руб.
+
+``` + +--- + +## Карточки + +```html +
+ Категория +

Заголовок карточки

+

Описание карточки с основной информацией.

+
+``` + +--- + +## Паттерн фона + +```html +
+
+
+ +
+
+``` + +```css +.pattern-light { + background-image: radial-gradient(#3b82f6 1px, transparent 1px); + background-size: 32px 32px; + opacity: 0.25; +} +``` + +--- + +## Логотип + +```html + +``` + +--- + +## Секции лендинга + +| Секция | Класс | Описание | +|--------|-------|----------| +| Hero | `.hero-v12` | pattern-light фон, massive typography | +| Features | `.features-section-v12` | 3-колоночная сетка карточек | +| UPD Types | `.upd-types-v12` | 9 Hub-style карточек | +| Pricing | `.pricing-section-v12` | 3 тарифа (Starter/Pro/Enterprise) | +| CTA | `.cta-section-v12` | Белая карточка с massive button | +| Footer | `.footer-v12` | 5-колоночный, status node, signature | + +--- + +## Референсные файлы + +При создании UI обращайся к реальным файлам проекта: + +| Компонент | Файл | +|-----------|------| +| CSS-система | `backend/app/static/css/documatica.css` | +| Главная страница | `backend/app/templates/public/home.html` | +| Форма УПД | `backend/app/templates/public/upd/*.html` | +| Header | `backend/app/templates/components/header_dynamic.html` | + +--- + +## Anti-patterns (ЗАПРЕЩЕНО) + +- Эмодзи в UI +- `rounded-md`, `rounded-sm`, острые углы +- Серые акценты вместо blue-600 +- Маленькие паддинги (`p-2`, `p-4`) +- `font-normal` для заголовков +- Темные фоны (только для специфических блоков) +- Градиенты (кроме subtle) +- Тени с высокой непрозрачностью + +--- + +## Pre-Delivery Checklist + +- [ ] Все скругления >= `rounded-2xl` +- [ ] Labels: 9px, uppercase, tracking-widest +- [ ] Кнопки: font-black, uppercase, tracking +- [ ] Паддинги >= `p-6` для карточек +- [ ] Акценты только blue-600 и docu-gold +- [ ] Нет эмодзи - только SVG иконки +- [ ] Hover состояния с transition +- [ ] Responsive: 375px, 768px, 1024px, 1440px + +--- + +## Workflow: Как использовать этот skill + +### При создании нового компонента: + +1. **Найди нужный компонент** в таблице "Библиотека компонентов" +2. **Прочитай HTML и CSS файлы** из `references/` +3. **Скопируй структуру и классы** из референса +4. **Адаптируй под задачу**, сохраняя стиль v12.0 + +### Пример: + +Если нужно создать кнопку: +``` +1. Читай: references/buttons.html и references/buttons.css +2. Выбери нужный тип: btn--primary, btn--smart, btn--outline +3. Используй готовую структуру с правильными классами +``` + +### Ключевые CSS-классы из tokens.css: + +```css +/* Spacing */ +--spacing-4: 1rem; +--spacing-6: 1.5rem; +--spacing-8: 2rem; +--spacing-10: 2.5rem; +--spacing-16: 4rem; +--spacing-20: 5rem; + +/* Radius */ +--radius-lg: 1rem; +--radius-xl: 1.5rem; +--radius-2xl: 2rem; +--radius-3xl: 3rem; +--radius-4xl: 4rem; + +/* Transitions */ +--transition-base: all 0.2s ease; +--transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +--transition-arrow: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); +``` diff --git a/skills/documatica-v12-design-system/references/accordion.css b/skills/documatica-v12-design-system/references/accordion.css new file mode 100644 index 00000000..c2e0893f --- /dev/null +++ b/skills/documatica-v12-design-system/references/accordion.css @@ -0,0 +1,509 @@ +/** + * Documatica Design System v12.0 + * Accordion & Collapsible Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + BASIC ACCORDION + ========================================================================= */ + +.accordion { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.accordion__item { + background: var(--color-white); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-sm); + transition: var(--transition-base); +} + +.accordion__item:hover { + box-shadow: var(--shadow-md); +} + +.accordion__item[open] { + box-shadow: var(--shadow-lg); +} + +.accordion__header { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-5) var(--spacing-6); + cursor: pointer; + list-style: none; + transition: var(--transition-base); +} + +.accordion__header::-webkit-details-marker { + display: none; +} + +.accordion__header:hover { + background: var(--color-slate-50); +} + +.accordion__title { + flex: 1; + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.accordion__icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-slate-400); + transition: var(--transition-spring); +} + +.accordion__icon svg { + width: 20px; + height: 20px; +} + +.accordion__item[open] .accordion__icon { + transform: rotate(180deg); + color: var(--color-primary); +} + +.accordion__content { + padding: 0 var(--spacing-6) var(--spacing-6); +} + +.accordion__content p { + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); +} + +/* ========================================================================= + WITH ICONS + ========================================================================= */ + +.accordion--icons .accordion__icon-left { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-lg); + color: var(--color-primary); + flex-shrink: 0; +} + +.accordion--icons .accordion__icon-left svg { + width: 20px; + height: 20px; +} + +.accordion--icons .accordion__content { + padding-left: calc(var(--spacing-6) + 40px + var(--spacing-4)); +} + +/* ========================================================================= + BORDERED + ========================================================================= */ + +.accordion--bordered .accordion__item { + background: transparent; + border: 2px solid var(--color-slate-200); + box-shadow: none; +} + +.accordion--bordered .accordion__item:hover { + border-color: var(--color-slate-300); + box-shadow: none; +} + +.accordion--bordered .accordion__item[open] { + border-color: var(--color-primary); + box-shadow: none; +} + +.accordion--bordered .accordion__icon svg { + transition: var(--transition-spring); +} + +.accordion--bordered .accordion__item[open] .accordion__icon svg { + transform: rotate(45deg); +} + +/* ========================================================================= + FLUSH + ========================================================================= */ + +.accordion--flush .accordion__item { + background: transparent; + border-radius: 0; + box-shadow: none; + border-bottom: 1px solid var(--color-slate-200); +} + +.accordion--flush .accordion__item:first-child { + border-top: 1px solid var(--color-slate-200); +} + +.accordion--flush .accordion__item:hover, +.accordion--flush .accordion__item[open] { + box-shadow: none; +} + +.accordion--flush .accordion__header { + padding-left: 0; + padding-right: 0; +} + +.accordion--flush .accordion__content { + padding-left: 0; + padding-right: 0; +} + +/* ========================================================================= + DARK VARIANT + ========================================================================= */ + +.accordion--dark { + background: var(--color-dark); + padding: var(--spacing-6); + border-radius: var(--radius-2xl); +} + +.accordion--dark .accordion__item { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: none; +} + +.accordion--dark .accordion__item:hover { + background: rgba(255, 255, 255, 0.08); + box-shadow: none; +} + +.accordion--dark .accordion__item[open] { + background: rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.3); + box-shadow: none; +} + +.accordion--dark .accordion__header:hover { + background: transparent; +} + +.accordion--dark .accordion__title { + color: var(--color-white); +} + +.accordion--dark .accordion__icon { + color: var(--color-slate-400); +} + +.accordion--dark .accordion__item[open] .accordion__icon { + color: var(--color-primary); +} + +.accordion--dark .accordion__content p { + color: var(--color-slate-300); +} + +/* ========================================================================= + NUMBERED STEPS + ========================================================================= */ + +.accordion--numbered .accordion__number { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-600); + flex-shrink: 0; + transition: var(--transition-base); +} + +.accordion--numbered .accordion__item[open] .accordion__number { + background: var(--color-primary); + color: var(--color-white); +} + +.accordion--numbered .accordion__content { + padding-left: calc(var(--spacing-6) + 40px + var(--spacing-4)); +} + +/* ========================================================================= + COLLAPSIBLE LIST + ========================================================================= */ + +.collapsible-list { + display: flex; + flex-direction: column; + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-md); + overflow: hidden; +} + +.collapsible-list__item { + border-bottom: 1px solid var(--color-slate-100); +} + +.collapsible-list__item:last-child { + border-bottom: none; +} + +.collapsible-list__header { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-4) var(--spacing-5); + cursor: pointer; + list-style: none; + transition: var(--transition-base); +} + +.collapsible-list__header::-webkit-details-marker { + display: none; +} + +.collapsible-list__header:hover { + background: var(--color-slate-50); +} + +.collapsible-list__icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: var(--radius-lg); + color: var(--color-slate-500); + flex-shrink: 0; + transition: var(--transition-base); +} + +.collapsible-list__icon svg { + width: 18px; + height: 18px; +} + +.collapsible-list__item[open] .collapsible-list__icon { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.collapsible-list__title { + flex: 1; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.collapsible-list__badge { + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: var(--color-slate-100); + border-radius: var(--radius-full); +} + +.collapsible-list__arrow { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-slate-400); + transition: var(--transition-spring); +} + +.collapsible-list__arrow svg { + width: 16px; + height: 16px; +} + +.collapsible-list__item[open] .collapsible-list__arrow { + transform: rotate(90deg); + color: var(--color-primary); +} + +.collapsible-list__content { + padding: 0 var(--spacing-5) var(--spacing-4); + padding-left: calc(var(--spacing-5) + 36px + var(--spacing-3)); +} + +.collapsible-list__link { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + text-decoration: none; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.collapsible-list__link:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.collapsible-list__link svg { + width: 16px; + height: 16px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +.collapsible-list__link:hover svg { + color: var(--color-primary); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .accordion__header { + padding: var(--spacing-4); + } + + .accordion__title { + font-size: var(--font-size-base); + } + + .accordion__content { + padding: 0 var(--spacing-4) var(--spacing-4); + } + + .accordion--icons .accordion__content, + .accordion--numbered .accordion__content { + padding-left: var(--spacing-4); + } + + .collapsible-list__content { + padding-left: var(--spacing-5); + } +} diff --git a/skills/documatica-v12-design-system/references/accordion.html b/skills/documatica-v12-design-system/references/accordion.html new file mode 100644 index 00000000..5e8f7bd5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/accordion.html @@ -0,0 +1,448 @@ + + + + + + Accordion — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Expand Protocol v12.0 +
+

+ Accordion +

+
+ + +
+

01. Basic Accordion

+
+
+ + Что такое Documatica? + + + + + + +
+

Documatica — это интеллектуальная платформа управления документами на базе AI. Система автоматически анализирует, классифицирует и организует ваши документы, обеспечивая мгновенный доступ к нужной информации.

+
+
+
+ + Какие типы документов поддерживаются? + + + + + + +
+

Мы поддерживаем более 50 форматов: PDF, DOCX, XLSX, изображения, сканы, электронные письма и многое другое. AI-модуль умеет распознавать текст на 40+ языках.

+
+
+
+ + Как обеспечивается безопасность данных? + + + + + + +
+

Все данные шифруются по стандарту AES-256 в транзите и при хранении. Мы сертифицированы по ISO 27001 и SOC 2 Type II. Данные хранятся в дата-центрах на территории ЕС.

+
+
+
+
+ + +
+

02. With Icons

+
+
+ + + + + + + Безопасность и шифрование + + + + + + +
+

End-to-end шифрование для всех документов. Двухфакторная аутентификация и аудит логов доступа. Соответствие GDPR и локальным требованиям.

+
+
+
+ + + + + + + AI-обработка документов + + + + + + +
+

Автоматическое распознавание типа документа, извлечение ключевых данных, классификация и тегирование. Обучение на ваших данных для повышения точности.

+
+
+
+ + + + + + + Интеграции и API + + + + + + +
+

REST API и webhook-уведомления. Готовые интеграции с Slack, Teams, Salesforce, 1C и другими системами. SDK для Python, JavaScript и .NET.

+
+
+
+
+ + +
+

03. Bordered

+
+
+ + Как начать работу? + + + + + + +
+

Зарегистрируйтесь на сайте, загрузите первые документы и система автоматически начнёт их анализировать. Полный онбординг занимает около 5 минут.

+
+
+
+ + Какие есть тарифные планы? + + + + + + +
+

Starter (бесплатно, до 100 документов), Pro (990₽/мес, до 10 000 документов), Enterprise (индивидуально, безлимит + выделенный сервер).

+
+
+
+ + Есть ли мобильное приложение? + + + + + + +
+

Да, приложения для iOS и Android доступны в App Store и Google Play. Полная синхронизация с веб-версией, сканирование документов через камеру.

+
+
+
+
+ + +
+

04. Flush (No Border)

+
+
+ + Можно ли отменить подписку? + + + + + + +
+

Да, подписку можно отменить в любой момент. Документы останутся доступны до конца оплаченного периода. После отмены данные хранятся ещё 30 дней.

+
+
+
+ + Как экспортировать документы? + + + + + + +
+

Выберите документы → Экспорт → Формат (оригинал, PDF, ZIP-архив). Массовый экспорт через API или раздел "Настройки → Данные".

+
+
+
+ + Как связаться с поддержкой? + + + + + + +
+

Чат поддержки в приложении (24/7), email support@documatica.io, телефон +7 (495) 123-45-67 (пн-пт 9:00-18:00 МСК).

+
+
+
+
+ + +
+

05. Dark Variant

+
+
+ + Что такое Smart Analysis? + + + + + + +
+

Функция AI-анализа для автоматического выявления рисков, аномалий и важных положений в документах. Особенно полезна для юридических и финансовых документов.

+
+
+
+ + Как работает OCR? + + + + + + +
+

Оптическое распознавание символов на базе нейросетей. Точность 99.2% для печатного текста, 95% для рукописного. Поддержка 40+ языков включая кириллицу.

+
+
+
+ + Есть ли версия On-Premise? + + + + + + +
+

Да, для Enterprise-клиентов доступна установка на собственные серверы. Docker-контейнеры, Kubernetes Helm Charts, поддержка major облачных провайдеров.

+
+
+
+
+ + +
+

06. Numbered Steps

+
+
+ + 01 + Создайте аккаунт + + + + + + +
+

Зарегистрируйтесь через email или войдите через Google/Microsoft SSO. Подтвердите email и заполните профиль компании.

+
+
+
+ + 02 + Загрузите документы + + + + + + +
+

Перетащите файлы или подключите облачное хранилище. Поддерживаются папки и ZIP-архивы для массовой загрузки.

+
+
+
+ + 03 + Настройте рабочее пространство + + + + + + +
+

Создайте папки и теги, настройте права доступа для команды, подключите интеграции с вашими инструментами.

+
+
+
+ + 04 + Начните работу + + + + + + +
+

Используйте умный поиск, автоматические workflows и AI-аналитику для эффективной работы с документами.

+
+
+
+
+ + +
+

07. Collapsible List

+
+
+ + + + + + + Финансовые документы + 24 + + + + + + +
+ + + + + Счёт-фактура Q4 2024.pdf + + + + + + Баланс 2024.xlsx + + + + + + Налоговая декларация.pdf + +
+
+
+ + + + + + + Юридические + 12 + + + + + + +
+ + + + + Договор аренды.docx + + + + + + NDA с партнёром.pdf + +
+
+
+ + + + + + + Кадровые + 8 + + + + + + +
+ + + + + Штатное расписание.xlsx + +
+
+
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/alerts.css b/skills/documatica-v12-design-system/references/alerts.css new file mode 100644 index 00000000..63cb9741 --- /dev/null +++ b/skills/documatica-v12-design-system/references/alerts.css @@ -0,0 +1,559 @@ +/** + * Documatica Design System v12.0 + * Alert & Notification Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.alerts-stack { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + ALERT BASE + ========================================================================= */ + +.alert { + display: flex; + align-items: flex-start; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + border-radius: var(--radius-xl); + background: var(--color-white); + border: 1px solid var(--color-slate-200); +} + +.alert__icon { + width: 24px; + height: 24px; + flex-shrink: 0; + margin-top: 2px; +} + +.alert__content { + flex: 1; + min-width: 0; +} + +.alert__title { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin-bottom: var(--spacing-1); +} + +.alert__text { + display: block; + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); +} + +/* ========================================================================= + ALERT VARIANTS + ========================================================================= */ + +.alert--info { + background: rgba(59, 130, 246, 0.08); + border-color: rgba(59, 130, 246, 0.2); +} + +.alert--info .alert__icon { + color: var(--color-primary); +} + +.alert--info .alert__title { + color: var(--color-primary); +} + +.alert--success { + background: rgba(16, 185, 129, 0.08); + border-color: rgba(16, 185, 129, 0.2); +} + +.alert--success .alert__icon { + color: var(--color-success); +} + +.alert--success .alert__title { + color: var(--color-success); +} + +.alert--warning { + background: rgba(251, 191, 36, 0.12); + border-color: rgba(251, 191, 36, 0.3); +} + +.alert--warning .alert__icon { + color: #b45309; +} + +.alert--warning .alert__title { + color: #b45309; +} + +.alert--danger { + background: rgba(220, 38, 38, 0.08); + border-color: rgba(220, 38, 38, 0.2); +} + +.alert--danger .alert__icon { + color: var(--color-danger); +} + +.alert--danger .alert__title { + color: var(--color-danger); +} + +/* ========================================================================= + ALERT DISMISSIBLE + ========================================================================= */ + +.alert--dismissible { + padding-right: var(--spacing-12); + position: relative; +} + +.alert__close { + position: absolute; + top: var(--spacing-4); + right: var(--spacing-4); + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-md); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.alert__close svg { + width: 16px; + height: 16px; +} + +.alert__close:hover { + background: rgba(0, 0, 0, 0.05); + color: var(--color-slate-600); +} + +/* ========================================================================= + ALERT ACTIONS + ========================================================================= */ + +.alert__actions { + display: flex; + gap: var(--spacing-3); + margin-top: var(--spacing-4); +} + +.alert__btn { + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.alert__btn--primary { + background: var(--color-primary); + border: none; + color: var(--color-white); +} + +.alert__btn--primary:hover { + background: var(--color-primary-dark); +} + +.alert__btn--danger { + background: var(--color-danger); + border: none; + color: var(--color-white); +} + +.alert__btn--danger:hover { + background: #b91c1c; +} + +.alert__btn--ghost { + background: transparent; + border: none; + color: var(--color-slate-600); +} + +.alert__btn--ghost:hover { + background: rgba(0, 0, 0, 0.05); +} + +/* ========================================================================= + ALERT ACCENT BORDER + ========================================================================= */ + +.alert--accent { + border-left-width: 4px; + padding-left: var(--spacing-5); +} + +.alert--accent.alert--info { + border-left-color: var(--color-primary); +} + +.alert--accent.alert--success { + border-left-color: var(--color-success); +} + +.alert--accent.alert--warning { + border-left-color: var(--color-smart); +} + +.alert--accent.alert--danger { + border-left-color: var(--color-danger); +} + +/* ========================================================================= + INLINE ALERTS + ========================================================================= */ + +.alerts-inline { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-6); +} + +.alert-inline { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); +} + +.alert-inline svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.alert-inline--info { + color: var(--color-primary); +} + +.alert-inline--success { + color: var(--color-success); +} + +.alert-inline--danger { + color: var(--color-danger); +} + +/* ========================================================================= + TOAST NOTIFICATIONS + ========================================================================= */ + +.toasts-demo { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + max-width: 400px; +} + +.toast { + display: flex; + align-items: flex-start; + gap: var(--spacing-3); + padding: var(--spacing-4); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + position: relative; + overflow: hidden; +} + +.toast__icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + flex-shrink: 0; +} + +.toast__icon svg { + width: 18px; + height: 18px; +} + +.toast--success .toast__icon { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.toast--danger .toast__icon { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +.toast--info .toast__icon { + background: rgba(59, 130, 246, 0.15); + color: var(--color-primary); +} + +.toast__content { + flex: 1; + min-width: 0; +} + +.toast__title { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.toast__text { + display: block; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + margin-top: 2px; +} + +.toast__close { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-md); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); + flex-shrink: 0; +} + +.toast__close svg { + width: 16px; + height: 16px; +} + +.toast__close:hover { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +.toast__progress { + position: absolute; + bottom: 0; + left: 0; + height: 3px; + width: 60%; + background: var(--color-primary); + border-radius: 0 var(--radius-full) var(--radius-full) 0; +} + +/* ========================================================================= + BANNER + ========================================================================= */ + +.banner { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-5); + border-radius: var(--radius-xl); + font-size: var(--font-size-base); +} + +.banner--info { + background: var(--color-primary); + color: var(--color-white); +} + +.banner--warning { + background: var(--color-smart); + color: var(--color-dark); +} + +.banner__icon { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.banner__text { + flex: 1; +} + +.banner__text strong { + font-weight: var(--font-weight-bold); +} + +.banner__link { + font-weight: var(--font-weight-bold); + color: inherit; + text-decoration: underline; + white-space: nowrap; +} + +.banner__link:hover { + opacity: 0.8; +} + +.banner__close { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + background: rgba(0, 0, 0, 0.1); + border: none; + border-radius: var(--radius-md); + color: inherit; + cursor: pointer; + transition: var(--transition-base); + flex-shrink: 0; +} + +.banner__close svg { + width: 14px; + height: 14px; +} + +.banner__close:hover { + background: rgba(0, 0, 0, 0.2); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .banner { + flex-wrap: wrap; + } + + .banner__link { + width: 100%; + margin-top: var(--spacing-2); + } +} diff --git a/skills/documatica-v12-design-system/references/alerts.html b/skills/documatica-v12-design-system/references/alerts.html new file mode 100644 index 00000000..8956a625 --- /dev/null +++ b/skills/documatica-v12-design-system/references/alerts.html @@ -0,0 +1,339 @@ + + + + + + Alerts — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Notification Protocol v12.0 +
+

+ Алерты +

+
+ + +
+

01. Basic Alerts

+
+ + +
+ + + +
+ Синхронизация с API успешно завершена. Все данные актуальны. +
+
+ + +
+ + + +
+ Документ успешно верифицирован и добавлен в архив. +
+
+ + +
+ + + +
+ Истекает срок действия лицензии. Осталось 7 дней. +
+
+ + +
+ + + +
+ Ошибка валидации ИНН. Проверьте введённые данные. +
+
+ +
+
+ + +
+

02. With Title

+
+ + +
+ + + +
+ Информация + Система перейдёт в режим технического обслуживания 15.06.2026 с 02:00 до 04:00 МСК. +
+
+ + +
+ + + +
+ Оплата получена + Счёт №1284 успешно оплачен. Сумма: 125,000 ₽ +
+
+ +
+
+ + +
+

03. Dismissible

+
+ +
+ + + +
+ Новое обновление доступно + Documatica v12.1 включает улучшения производительности AI-анализа. +
+ +
+ +
+ + + +
+ Квота API приближается к лимиту: использовано 85% +
+ +
+ +
+
+ + +
+

04. With Actions

+
+ +
+ + + +
+ Подтвердите действие + Вы уверены, что хотите удалить 15 документов? +
+ + +
+
+
+ +
+ + + +
+ Сессия истекла + Ваша сессия была завершена из-за бездействия. +
+ +
+
+
+ +
+
+ + +
+

05. Accent Border (Left)

+
+ +
+
+ Подсказка + Используйте комбинацию Ctrl+K для быстрого поиска документов. +
+
+ +
+
+ Резервное копирование + Автоматическое резервное копирование выполнено успешно. +
+
+ +
+
+ Внимание + Некоторые поля содержат устаревшие данные. +
+
+ +
+
+ Критическая ошибка + Не удалось установить соединение с базой данных. +
+
+ +
+
+ + +
+

06. Inline Alerts

+
+ + + + + Минимум 8 символов + + + + + + Пароль надёжный + + + + + + Поле обязательно + +
+
+ + +
+

07. Toast Notifications

+
+ +
+
+ + + +
+
+ Сохранено + Изменения успешно сохранены +
+ +
+ +
+
+ + + +
+
+ Ошибка загрузки + Не удалось загрузить файл +
+ +
+ +
+
+ + + +
+
+ Синхронизация + Обновление данных... +
+
+
+ +
+
+ + +
+

08. Banner

+ + + + + +
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/avatars.css b/skills/documatica-v12-design-system/references/avatars.css new file mode 100644 index 00000000..ddf27b4c --- /dev/null +++ b/skills/documatica-v12-design-system/references/avatars.css @@ -0,0 +1,414 @@ +/** + * Documatica Design System v12.0 + * Avatar Components + */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + AVATAR BASE + ========================================================================= */ + +.avatar { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + overflow: hidden; + background: var(--color-slate-200); + flex-shrink: 0; +} + +.avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Sizes */ +.avatar--xs { + width: 24px; + height: 24px; + font-size: 10px; +} + +.avatar--sm { + width: 32px; + height: 32px; + font-size: 12px; +} + +.avatar--base { + width: 40px; + height: 40px; + font-size: 14px; +} + +.avatar--lg { + width: 48px; + height: 48px; + font-size: 16px; +} + +.avatar--xl { + width: 64px; + height: 64px; + font-size: 20px; +} + +.avatar--2xl { + width: 96px; + height: 96px; + font-size: 28px; +} + +/* Shapes */ +.avatar--circle { + border-radius: var(--radius-full); +} + +.avatar--rounded { + border-radius: var(--radius-xl); +} + +.avatar--square { + border-radius: var(--radius-md); +} + +/* Initials */ +.avatar--initials { + font-weight: var(--font-weight-bold); + color: var(--color-white); + text-transform: uppercase; +} + +.avatar--primary { + background: var(--color-primary); +} + +.avatar--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.avatar--success { + background: var(--color-success); +} + +.avatar--danger { + background: var(--color-danger); +} + +.avatar--dark { + background: var(--color-dark); +} + +.avatar--slate { + background: var(--color-slate-400); +} + +/* ========================================================================= + AVATAR WRAPPER (for status/badge) + ========================================================================= */ + +.avatar-wrapper { + position: relative; + display: inline-block; +} + +.avatar-status { + position: absolute; + bottom: 0; + right: 0; + width: 14px; + height: 14px; + border-radius: var(--radius-full); + border: 3px solid var(--color-white); +} + +.avatar-status--online { + background: var(--color-success); +} + +.avatar-status--offline { + background: var(--color-slate-400); +} + +.avatar-status--busy { + background: var(--color-danger); +} + +.avatar-status--away { + background: #f59e0b; +} + +.avatar-badge { + position: absolute; + top: -4px; + right: -4px; + min-width: 20px; + height: 20px; + padding: 0 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-danger); + border-radius: var(--radius-full); + border: 2px solid var(--color-white); +} + +.avatar-badge--lg { + min-width: 24px; + height: 24px; + font-size: 12px; +} + +.avatar-badge--icon { + width: 24px; + height: 24px; + padding: 0; + background: var(--color-success); +} + +.avatar-badge--icon svg { + width: 14px; + height: 14px; +} + +/* ========================================================================= + AVATAR GROUP + ========================================================================= */ + +.avatar-groups { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +.avatar-group { + display: flex; +} + +.avatar-group .avatar { + border: 3px solid var(--color-white); + margin-left: -12px; + transition: var(--transition-spring); +} + +.avatar-group .avatar:first-child { + margin-left: 0; +} + +.avatar-group .avatar:hover { + transform: translateY(-4px); + z-index: 10; +} + +.avatar-group--lg .avatar { + margin-left: -16px; +} + +/* ========================================================================= + AVATAR DEMO + ========================================================================= */ + +.avatars-row { + display: flex; + align-items: flex-end; + gap: var(--spacing-6); + flex-wrap: wrap; +} + +.avatar-demo { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-3); +} + +.avatar-size { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); +} + +/* ========================================================================= + AVATAR CARDS + ========================================================================= */ + +.avatar-cards { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.avatar-card { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.avatar-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); +} + +.avatar-card--dark { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +.avatar-card--dark:hover { + border-color: var(--color-smart); +} + +.avatar-card__info { + display: flex; + flex-direction: column; + flex: 1; +} + +.avatar-card__name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.avatar-card--dark .avatar-card__name { + color: var(--color-white); +} + +.avatar-card__role { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.avatar-card--dark .avatar-card__role { + color: var(--color-slate-400); +} + +.avatar-card__badge { + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-smart); + background: rgba(251, 191, 36, 0.15); + border-radius: var(--radius-full); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .avatars-row { + justify-content: center; + } +} diff --git a/skills/documatica-v12-design-system/references/avatars.html b/skills/documatica-v12-design-system/references/avatars.html new file mode 100644 index 00000000..4e34e806 --- /dev/null +++ b/skills/documatica-v12-design-system/references/avatars.html @@ -0,0 +1,248 @@ + + + + + + Avatars — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Avatar Protocol v12.0 +
+

+ Avatars +

+
+ + +
+

01. Sizes

+
+
+
+ Avatar +
+ XS (24px) +
+
+
+ Avatar +
+ SM (32px) +
+
+
+ Avatar +
+ Base (40px) +
+
+
+ Avatar +
+ LG (48px) +
+
+
+ Avatar +
+ XL (64px) +
+
+
+ Avatar +
+ 2XL (96px) +
+
+
+ + +
+

02. Initials

+
+
АП
+
ИС
+
МК
+
ЕВ
+
ОН
+
ДТ
+
+
+ + +
+

03. With Status

+
+
+
+ Avatar +
+ +
+
+
+ Avatar +
+ +
+
+
+ Avatar +
+ +
+
+
+ Avatar +
+ +
+
+
+ + +
+

04. With Badge

+
+
+
+ Avatar +
+ 3 +
+
+
+ Avatar +
+ 12 +
+
+
AI
+ + + + + +
+
+
+ + +
+

05. Avatar Group

+
+
+
+ Avatar +
+
+ Avatar +
+
+ Avatar +
+
+ Avatar +
+
+5
+
+ +
+
+ Avatar +
+
+ Avatar +
+
+ Avatar +
+
+
+
+ + +
+

06. Shapes

+
+
+
+ Avatar +
+ Circle +
+
+
+ Avatar +
+ Rounded +
+
+
+ Avatar +
+ Square +
+
+
+ + +
+

07. With Text

+
+
+
+ Avatar +
+
+ Алексей Петров + Product Manager +
+
+
+
+
+ Avatar +
+ +
+
+ Мария Иванова + UX Designer +
+ Pro +
+
+
AI
+
+ Documatica AI + Smart Assistant +
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/badges.css b/skills/documatica-v12-design-system/references/badges.css new file mode 100644 index 00000000..3b93aa85 --- /dev/null +++ b/skills/documatica-v12-design-system/references/badges.css @@ -0,0 +1,554 @@ +/** + * Documatica Design System v12.0 + * Badge & Tag Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.badges-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-3); + align-items: flex-start; +} + +.badges-row--align-center { + align-items: center; +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + BADGE BASE + ========================================================================= */ + +.badge { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + border-radius: var(--radius-lg); + white-space: nowrap; +} + +/* ========================================================================= + BADGE SIZES + ========================================================================= */ + +.badge--sm { + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); +} + +.badge--lg { + padding: var(--spacing-3) var(--spacing-4); + font-size: var(--font-size-base); +} + +/* ========================================================================= + BADGE COLORS + ========================================================================= */ + +.badge--success { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.badge--warning { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.badge--danger { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +.badge--info { + background: rgba(59, 130, 246, 0.15); + color: var(--color-primary); +} + +.badge--neutral { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +.badge--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.badge--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.badge--dark { + background: var(--color-dark); + color: var(--color-white); +} + +/* ========================================================================= + OUTLINE BADGES + ========================================================================= */ + +.badge--outline { + background: transparent; + border: 2px solid currentColor; +} + +.badge--outline-primary { + color: var(--color-primary); +} + +.badge--outline-success { + color: var(--color-success); +} + +.badge--outline-warning { + color: #b45309; +} + +.badge--outline-danger { + color: var(--color-danger); +} + +.badge--outline-neutral { + color: var(--color-slate-400); +} + +/* ========================================================================= + PILL BADGES + ========================================================================= */ + +.badge--pill { + border-radius: var(--radius-full); + padding: var(--spacing-2) var(--spacing-4); +} + +/* ========================================================================= + DOT BADGES + ========================================================================= */ + +.badge--dot { + padding-left: var(--spacing-2); +} + +.badge__dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; +} + +.badge__dot--pulse { + animation: dotPulse 1.5s ease-in-out infinite; +} + +@-webkit-keyframes dotPulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.8); } +} + +@keyframes dotPulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.8); } +} + +/* ========================================================================= + ICON BADGES + ========================================================================= */ + +.badge--icon svg { + width: 14px; + height: 14px; + flex-shrink: 0; +} + +/* ========================================================================= + COUNTER BADGES + ========================================================================= */ + +.badge--counter { + min-width: 24px; + height: 24px; + padding: 0 var(--spacing-2); + border-radius: var(--radius-full); + justify-content: center; + font-size: var(--font-size-sm); +} + +/* ========================================================================= + REMOVABLE TAGS + ========================================================================= */ + +.tag { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: var(--color-slate-100); + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.tag--primary { + background: rgba(59, 130, 246, 0.15); + color: var(--color-primary); +} + +.tag__remove { + display: flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-md); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.tag__remove svg { + width: 12px; + height: 12px; +} + +.tag__remove:hover { + background: var(--color-slate-200); + color: var(--color-danger); +} + +.tag--primary .tag__remove:hover { + background: rgba(59, 130, 246, 0.3); + color: var(--color-primary); +} + +/* ========================================================================= + CATEGORY TAGS + ========================================================================= */ + +.category-tag { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-full); +} + +.category-tag__dot { + width: 10px; + height: 10px; + border-radius: var(--radius-full); +} + +.category-tag__dot--blue { + background: var(--color-primary); +} + +.category-tag__dot--green { + background: var(--color-success); +} + +.category-tag__dot--yellow { + background: var(--color-smart); +} + +.category-tag__dot--red { + background: var(--color-danger); +} + +/* ========================================================================= + LABEL BADGES + ========================================================================= */ + +.label-badge { + display: inline-flex; + border-radius: var(--radius-md); + overflow: hidden; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); +} + +.label-badge__key { + padding: var(--spacing-1) var(--spacing-2); + background: var(--color-slate-600); + color: var(--color-white); +} + +.label-badge__value { + padding: var(--spacing-1) var(--spacing-2); + background: var(--color-slate-200); + color: var(--color-dark); +} + +.label-badge__value--success { + background: var(--color-success); + color: var(--color-white); +} + +.label-badge__value--primary { + background: var(--color-primary); + color: var(--color-white); +} + +/* ========================================================================= + EXAMPLE: DOCUMENT ROW + ========================================================================= */ + +.example-card { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; +} + +.example-row { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-6); + border-bottom: 1px solid var(--color-slate-100); +} + +.example-row:last-child { + border-bottom: none; +} + +.example-row__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: var(--radius-lg); + color: var(--color-slate-500); + flex-shrink: 0; +} + +.example-row__icon svg { + width: 20px; + height: 20px; +} + +.example-row__content { + flex: 1; + min-width: 0; +} + +.example-row__title { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.example-row__meta { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.example-row__badges { + display: flex; + gap: var(--spacing-2); + flex-shrink: 0; +} + +/* ========================================================================= + EXAMPLE: AVATARS + ========================================================================= */ + +.example-avatars { + display: flex; + gap: var(--spacing-6); + margin-top: var(--spacing-8); +} + +.avatar-badge-wrap { + position: relative; +} + +.avatar { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-200); + border-radius: var(--radius-full); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.avatar--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.avatar--dark { + background: var(--color-dark); + color: var(--color-white); +} + +.avatar-badge { + position: absolute; + bottom: 2px; + right: 2px; + width: 14px; + height: 14px; + border-radius: var(--radius-full); + border: 2px solid var(--color-white); +} + +.avatar-badge--online { + background: var(--color-success); +} + +.avatar-badge--busy { + background: var(--color-danger); +} + +.avatar-badge--away { + background: var(--color-smart); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .example-row { + flex-wrap: wrap; + } + + .example-row__badges { + width: 100%; + margin-top: var(--spacing-2); + } +} diff --git a/skills/documatica-v12-design-system/references/badges.html b/skills/documatica-v12-design-system/references/badges.html new file mode 100644 index 00000000..506528f9 --- /dev/null +++ b/skills/documatica-v12-design-system/references/badges.html @@ -0,0 +1,288 @@ + + + + + + Badges — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Status Protocol v12.0 +
+

+ Бейджи +

+
+ + +
+

01. Status Badges

+
+ Готов + На проверке + Отклонён + Черновик + Архив +
+
+ + +
+

02. Outline Badges

+
+ Primary + Success + Warning + Danger + Neutral +
+
+ + +
+

03. With Dot Indicator

+
+ + + Активен + + + + Ожидание + + + + Offline + + + + Обработка + +
+
+ + +
+

04. Sizes

+
+ Small + Default + Large +
+
+ + +
+

05. Pill Badges

+
+ Новый + AI Анализ + Pro + Верифицирован +
+
+ + +
+

06. With Icons

+
+ + + + + Подтверждено + + + + + + Ошибка + + + + + + Внимание + + + + + + Инфо + +
+
+ + +
+

07. Counter Badges

+
+ 3 + 99+ + 12 + ★ +
+
+ + +
+

08. Removable Tags

+
+ + Финансы + + + + Юридические + + + + AI Аудит + + +
+
+ + +
+

09. Category Tags

+
+ + + Контракты + + + + Счета + + + + Акты + + + + Срочные + +
+
+ + +
+

10. Label Badges

+
+
+ Статус + Активен +
+
+ Версия + v12.0 +
+
+ Лицензия + MIT +
+
+
+ + +
+

11. Usage Examples

+ + +
+
+
+ + + +
+
+ Договор_ООО_ТехПром.pdf + Обновлён 2 часа назад +
+
+ + + Готов + + AI Анализ +
+
+ +
+
+ + + +
+
+ Счёт-фактура_№1284.pdf + Обновлён вчера +
+
+ + + На проверке + +
+
+
+ + +
+
+
DN
+ +
+
+
AI
+ +
+
+
?
+ +
+
+ +
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/blog-article.css b/skills/documatica-v12-design-system/references/blog-article.css new file mode 100644 index 00000000..51dd54ee --- /dev/null +++ b/skills/documatica-v12-design-system/references/blog-article.css @@ -0,0 +1,842 @@ +/** + * UI Kit v12.0 — Blog Article + * Article typography and content components + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 64px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-200); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + ARTICLE HEADER + ========================================================================= */ + +.article { + background: var(--color-white); + border-radius: 20px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.article__hero { + margin: 0; +} + +.article__hero img { + width: 100%; + height: 400px; + object-fit: cover; + display: block; +} + +.article__header { + padding: 32px; +} + +.article__meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 16px; + margin-bottom: 16px; +} + +.article__category { + display: inline-block; + padding: 4px 12px; + background: var(--color-slate-100); + color: var(--color-slate-600); + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + border-radius: 6px; +} + +.article__category--blue { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.article__date, +.article__read { + font-size: 14px; + color: var(--color-slate-400); +} + +.article__title { + font-size: clamp(28px, 5vw, 42px); + font-weight: 800; + color: var(--color-dark); + line-height: 1.2; + margin: 0 0 16px 0; +} + +.article__lead { + font-size: 20px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0 0 24px 0; +} + +.article__author { + display: flex; + align-items: center; + gap: 16px; + padding-top: 24px; + border-top: 1px solid var(--color-slate-100); +} + +.article__author-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} + +.article__author-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.article__author-name { + font-weight: 600; + color: var(--color-dark); +} + +.article__author-role { + font-size: 14px; + color: var(--color-slate-400); +} + +/* ========================================================================= + ARTICLE CONTENT / TYPOGRAPHY + ========================================================================= */ + +.article__content { + padding: 32px; +} + +.article__content h2 { + font-size: 28px; + font-weight: 800; + color: var(--color-dark); + margin: 48px 0 16px 0; + line-height: 1.3; +} + +.article__content h2:first-child { + margin-top: 0; +} + +.article__content h3 { + font-size: 22px; + font-weight: 700; + color: var(--color-dark); + margin: 32px 0 12px 0; + line-height: 1.3; +} + +.article__content h4 { + font-size: 18px; + font-weight: 600; + color: var(--color-dark); + margin: 24px 0 8px 0; +} + +.article__content p { + font-size: 18px; + color: var(--color-slate-600); + line-height: 1.8; + margin: 0 0 20px 0; +} + +.article__content a { + color: var(--color-primary); + text-decoration: none; + border-bottom: 1px solid transparent; + transition: border-color 0.2s ease; +} + +.article__content a:hover { + border-bottom-color: var(--color-primary); +} + +.article__content strong { + font-weight: 600; + color: var(--color-dark); +} + +.article__content code { + display: inline-block; + padding: 2px 8px; + background: var(--color-slate-100); + border-radius: 6px; + font-family: 'SF Mono', 'Fira Code', monospace; + font-size: 14px; + color: var(--color-primary); +} + +/* ========================================================================= + LISTS + ========================================================================= */ + +.article__content ul, +.article__content ol { + margin: 0 0 20px 0; + padding-left: 24px; +} + +.article__content li { + font-size: 18px; + color: var(--color-slate-600); + line-height: 1.8; + margin-bottom: 8px; +} + +.article__content li::marker { + color: var(--color-primary); +} + +.article__content ul ul, +.article__content ol ol { + margin: 8px 0 0 0; +} + +/* ========================================================================= + BLOCKQUOTE + ========================================================================= */ + +.quote { + margin: 32px 0; + padding: 24px 32px; + background: var(--color-slate-50); + border-left: 4px solid var(--color-primary); + border-radius: 0 16px 16px 0; +} + +.quote p { + font-size: 20px; + font-style: italic; + color: var(--color-dark); + line-height: 1.6; + margin: 0; +} + +.quote--author footer { + margin-top: 16px; +} + +.quote--author cite { + font-size: 14px; + font-style: normal; + color: var(--color-slate-500); +} + +/* ========================================================================= + CALLOUT / NOTE + ========================================================================= */ + +.callout { + display: flex; + gap: 16px; + padding: 20px; + border-radius: 16px; + margin: 24px 0; +} + +.callout__icon { + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 12px; +} + +.callout__content { + font-size: 15px; + line-height: 1.6; + color: var(--color-slate-600); +} + +.callout__content strong { + font-weight: 600; +} + +.callout--info { + background: rgba(59, 130, 246, 0.08); +} + +.callout--info .callout__icon { + background: rgba(59, 130, 246, 0.15); + color: var(--color-primary); +} + +.callout--info .callout__content strong { + color: var(--color-primary); +} + +.callout--warning { + background: rgba(251, 191, 36, 0.1); +} + +.callout--warning .callout__icon { + background: rgba(251, 191, 36, 0.2); + color: #b45309; +} + +.callout--warning .callout__content strong { + color: #b45309; +} + +.callout--success { + background: rgba(16, 185, 129, 0.08); +} + +.callout--success .callout__icon { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.callout--success .callout__content strong { + color: var(--color-success); +} + +.callout--danger { + background: rgba(220, 38, 38, 0.08); +} + +.callout--danger .callout__icon { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +.callout--danger .callout__content strong { + color: var(--color-danger); +} + +/* ========================================================================= + IMAGES + ========================================================================= */ + +.article__figure { + margin: 32px 0; +} + +.article__figure img { + width: 100%; + height: auto; + border-radius: 16px; + display: block; +} + +.article__figure figcaption { + margin-top: 12px; + font-size: 14px; + color: var(--color-slate-400); + text-align: center; +} + +.article__gallery { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin: 32px 0; +} + +.article__figure--half { + margin: 0; +} + +/* ========================================================================= + CODE BLOCK IN ARTICLE + ========================================================================= */ + +.article__code { + margin: 24px 0; + background: var(--color-dark); + border-radius: 16px; + overflow: hidden; +} + +.article__code-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 20px; + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.article__code-lang { + font-size: 12px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.article__code-copy { + padding: 6px 12px; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: 6px; + color: var(--color-slate-300); + font-family: inherit; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.article__code-copy:hover { + background: rgba(255, 255, 255, 0.15); + color: var(--color-white); +} + +.article__code pre { + margin: 0; + padding: 20px; + overflow-x: auto; +} + +.article__code code { + font-family: 'SF Mono', 'Fira Code', monospace; + font-size: 14px; + color: var(--color-slate-300); + line-height: 1.7; + background: none; + padding: 0; + border-radius: 0; +} + +/* ========================================================================= + TABLE + ========================================================================= */ + +.article__table-wrap { + overflow-x: auto; + margin: 24px 0; + border: 1px solid var(--color-slate-200); + border-radius: 16px; +} + +.article__table { + width: 100%; + border-collapse: collapse; +} + +.article__table th, +.article__table td { + padding: 14px 20px; + text-align: left; + border-bottom: 1px solid var(--color-slate-100); +} + +.article__table th { + background: var(--color-slate-50); + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-slate-500); +} + +.article__table td { + font-size: 15px; + color: var(--color-slate-600); +} + +.article__table tr:last-child td { + border-bottom: none; +} + +.article__table code { + font-size: 13px; +} + +/* ========================================================================= + AUTHOR BIO + ========================================================================= */ + +.author-bio { + display: flex; + gap: 24px; + padding: 32px; + background: var(--color-slate-50); + border-radius: 20px; + margin: 32px 0; +} + +.author-bio__avatar { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.author-bio__content { + flex: 1; +} + +.author-bio__name { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.author-bio__role { + font-size: 14px; + color: var(--color-primary); + margin: 0 0 12px 0; +} + +.author-bio__desc { + font-size: 15px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0 0 16px 0; +} + +.author-bio__social { + display: flex; + gap: 16px; +} + +.author-bio__link { + font-size: 14px; + font-weight: 500; + color: var(--color-slate-400); + text-decoration: none; + transition: color 0.2s ease; +} + +.author-bio__link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + TAGS + ========================================================================= */ + +.article__tags { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.article__tag { + display: inline-block; + padding: 8px 16px; + background: var(--color-slate-100); + border-radius: 100px; + font-size: 14px; + font-weight: 500; + color: var(--color-slate-600); + cursor: pointer; + transition: all 0.2s ease; +} + +.article__tag:hover { + background: var(--color-primary); + color: var(--color-white); +} + +/* ========================================================================= + SHARE + ========================================================================= */ + +.share { + display: flex; + align-items: center; + gap: 16px; +} + +.share__label { + font-size: 14px; + font-weight: 500; + color: var(--color-slate-500); +} + +.share__buttons { + display: flex; + gap: 8px; +} + +.share__btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.share__btn:hover { + transform: translateY(-2px); +} + +.share__btn--twitter:hover { + background: #000; + color: white; +} + +.share__btn--facebook:hover { + background: #1877f2; + color: white; +} + +.share__btn--linkedin:hover { + background: #0a66c2; + color: white; +} + +.share__btn--telegram:hover { + background: #0088cc; + color: white; +} + +.share__btn--copy:hover { + background: var(--color-primary); + color: white; +} + +/* ========================================================================= + RELATED ARTICLES + ========================================================================= */ + +.related__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.related__card { + background: var(--color-white); + border-radius: 20px; + overflow: hidden; + text-decoration: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.related__card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); +} + +.related__img { + width: 100%; + height: 160px; + object-fit: cover; + display: block; +} + +.related__content { + padding: 20px; +} + +.related__category { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-primary); +} + +.related__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + line-height: 1.4; + margin: 8px 0; +} + +.related__date { + font-size: 13px; + color: var(--color-slate-400); +} + +/* ========================================================================= + CODE BLOCK (PAGE LEVEL) + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .article__gallery { + grid-template-columns: 1fr; + } + + .author-bio { + flex-direction: column; + text-align: center; + } + + .author-bio__social { + justify-content: center; + } + + .related__grid { + grid-template-columns: 1fr; + } + + .share { + flex-direction: column; + align-items: flex-start; + } + + .callout { + flex-direction: column; + } +} diff --git a/skills/documatica-v12-design-system/references/blog-article.html b/skills/documatica-v12-design-system/references/blog-article.html new file mode 100644 index 00000000..efdb272b --- /dev/null +++ b/skills/documatica-v12-design-system/references/blog-article.html @@ -0,0 +1,508 @@ + + + + + + Blog Article — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ CONTENT +

Blog Article

+

Шаблоны статей блога. Заголовки, типографика, цитаты, изображения, авторы.

+
+ + +
+
+ 01 +

Article Header

+
+ +
+
+
+ Дизайн + 24 января 2026 + 8 мин чтения +
+

Как создать идеальную дизайн-систему для вашего продукта

+

Пошаговое руководство по созданию масштабируемой и консистентной дизайн-системы, которая объединит дизайнеров и разработчиков.

+
+ Avatar +
+ Александр Петров + Lead Product Designer +
+
+
+
+
+ + +
+
+ 02 +

With Hero Image

+
+ +
+
+ Hero +
+
+
+ Технологии + 20 января 2026 +
+

Будущее искусственного интеллекта в веб-разработке

+
+
+
+ + +
+
+ 03 +

Typography

+
+ +
+
+

Заголовок второго уровня

+

Основной текст статьи. Здесь мы используем шрифт Inter с размером 18px и высотой строки 1.8 для комфортного чтения длинных текстов. Жирный текст выделяется для акцентов, а курсив — для терминов и названий.

+ +

Второй параграф следует с отступом сверху. Ссылки выглядят вот так и имеют подчёркивание при наведении. Код в тексте: const design = 'system';

+ +

Заголовок третьего уровня

+

Подзаголовки структурируют контент и помогают читателю ориентироваться в статье. Каждый раздел должен быть логически связан с предыдущим.

+ +

Заголовок четвёртого уровня

+

Используется для мелких подразделов и деталей.

+
+
+
+ + +
+
+ 04 +

Lists

+
+ +
+
+

Маркированный список

+
    +
  • Первый пункт с важной информацией
    • +
  • Второй пункт описывает ещё одну особенность
    • +
  • Третий пункт завершает перечисление
    • +
  • Вложенные списки: +
      +
    • Подпункт первый
      • +
    • Подпункт второй
      • +
    +
    • +
+ +

Нумерованный список

+
    +
  1. Определите цели дизайн-системы
    2. +
  2. Проведите аудит существующего дизайна
    3. +
  3. Создайте токены: цвета, типографику, отступы
    4. +
  4. Разработайте базовые компоненты
    5. +
  5. Задокументируйте правила использования
    6. +
+
+
+
+ + +
+
+ 05 +

Blockquote

+
+ +
+
+
+

«Дизайн-система — это не библиотека компонентов. Это общий язык, на котором говорят дизайнеры и разработчики, чтобы создавать последовательный пользовательский опыт».

+
+ +
+

«Хороший дизайн невидим. Пользователь не должен думать о том, как взаимодействовать с интерфейсом — всё должно быть интуитивно понятно».

+
+ — Дитер Рамс, промышленный дизайнер +
+
+
+
+
+ + +
+
+ 06 +

Callout / Note

+
+ +
+
+
+
+ + + +
+
+ Примечание: Этот подход особенно эффективен для команд, работающих над несколькими продуктами одновременно. +
+
+ +
+
+ + + +
+
+ Внимание: Не забудьте протестировать компоненты на разных разрешениях экрана перед релизом. +
+
+ +
+
+ + + +
+
+ Совет: Используйте CSS-переменные для всех значений цветов — это упростит поддержку тёмной темы. +
+
+ +
+
+ + + +
+
+ Важно: Никогда не используйте !important в CSS дизайн-системы. +
+
+
+
+
+ + +
+
+ 07 +

Images

+
+ +
+
+
+ Workspace +
Рабочее место дизайнера с несколькими мониторами для эффективной работы
+
+ +

Изображения в статье имеют скруглённые углы и подпись снизу.

+ +
+
+ Code +
+
+ Analytics +
+
+
+
+
+ + +
+
+ 08 +

Code Block

+
+ +
+
+

Пример кода с подсветкой синтаксиса:

+ +
+
+ JavaScript + +
+ 
// Создание дизайн-токенов
+const tokens = {
+  colors: {
+    primary: '#3b82f6',
+    secondary: '#0f172a',
+    accent: '#fbbf24'
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px'
+  }
+};
+
+
+
+
+ + +
+
+ 09 +

Table

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ТокенЗначениеПрименение
--color-primary#3b82f6Основные действия, ссылки
--color-dark#0f172aЗаголовки, основной текст
--color-smart#fbbf24Акценты, уведомления
+
+
+
+
+ + +
+
+ 10 +

Author Bio

+
+ +
+
+
+ Author +
+

Александр Петров

+

Lead Product Designer

+

Более 10 лет в продуктовом дизайне. Специализируется на дизайн-системах, UX-исследованиях и построении дизайн-процессов в крупных командах.

+ +
+
+
+
+
+ + +
+
+ 11 +

Tags

+
+ +
+
+
+ Дизайн + UI/UX + Дизайн-система + Компоненты + Токены +
+
+
+
+ + +
+
+ 12 +

Share

+
+ + +
+ + +
+
+ 13 +

Related Articles

+
+ +
+
+ + +
+ Разработка +

CSS Grid vs Flexbox: что выбрать для вашего проекта

+ 22 января 2026 +
+ + + +
+ Дизайн +

Цветовые палитры для современных интерфейсов

+ 18 января 2026 +
+ + + +
+ Процессы +

Как наладить коммуникацию дизайнеров и разработчиков

+ 15 января 2026 +
+ +
+
+
+ + +
+
+ 14 +

Использование

+
+ +
+ 
<article class="article">
+  <header class="article__header">
+    <div class="article__meta">
+      <span class="article__category">Дизайн</span>
+      <span class="article__date">24 января 2026</span>
+    </div>
+    <h1 class="article__title">Заголовок статьи</h1>
+    <p class="article__lead">Лид-параграф</p>
+    <div class="article__author">...</div>
+  </header>
+  <div class="article__content">
+    <h2>Подзаголовок</h2>
+    <p>Текст...</p>
+    <blockquote class="quote">...</blockquote>
+    <div class="callout callout--info">...</div>
+  </div>
+</article>
+
+/* Callout варианты */
+.callout--info     /* Синий */
+.callout--warning  /* Жёлтый */
+.callout--success  /* Зелёный */
+.callout--danger   /* Красный */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/buttons.css b/skills/documatica-v12-design-system/references/buttons.css new file mode 100644 index 00000000..9690761d --- /dev/null +++ b/skills/documatica-v12-design-system/references/buttons.css @@ -0,0 +1,571 @@ +/** + * Documatica Button Kit v12.0 + * Design System for Client Websites + * + * Philosophy: "The v12.0 Spring" + * - Materiality: Buttons feel like physical objects with weight + * - Response: Hover = float up, Active = spring press down + */ + +/* ========================================================================== + CSS CUSTOM PROPERTIES (Design Tokens) + ========================================================================== */ + +:root { + /* Colors - Primary */ + --color-primary: #3b82f6; + --color-primary-hover: #2563eb; + --color-primary-shadow: rgba(59, 130, 246, 0.3); + --color-primary-shadow-hover: rgba(59, 130, 246, 0.5); + + /* Colors - Smart Gold (AI) */ + --color-smart: #fbbf24; + --color-smart-hover: #f59e0b; + --color-smart-shadow: rgba(251, 191, 36, 0.3); + --color-smart-shadow-hover: rgba(251, 191, 36, 0.5); + + /* Colors - Success */ + --color-success: #10b981; + --color-success-hover: #059669; + --color-success-shadow: rgba(16, 185, 129, 0.2); + + /* Colors - Danger */ + --color-danger: #dc2626; + --color-danger-bg: #fef2f2; + --color-danger-border: #fecaca; + --color-danger-hover: #dc2626; + + /* Colors - Neutral */ + --color-dark: #0f172a; + --color-dark-shadow: rgba(15, 23, 42, 0.1); + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-600: #475569; + --color-slate-900: #0f172a; + + /* Typography */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + --font-weight-bold: 700; + --font-weight-black: 900; + + /* Spacing */ + --spacing-xs: 0.5rem; + --spacing-sm: 0.75rem; + --spacing-md: 1.25rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 4rem; + + /* Border Radius */ + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --radius-xl: 1.5rem; + --radius-massive: 2.5rem; + + /* Transitions */ + --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + --transition-fast: all 0.15s ease; + --transition-arrow: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); + + /* Shadows */ + --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 15px 30px -5px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); +} + +/* ========================================================================== + BASE STYLES + ========================================================================== */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-family); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + color: var(--color-slate-900); +} + +.pattern-light { + background-color: #f8fafc; + background-image: radial-gradient(var(--color-primary) 1px, transparent 1px); + background-size: 32px 32px; + min-height: 100vh; + padding: 5rem 1.5rem; +} + +.container { + max-width: 64rem; + margin: 0 auto; +} + +/* ========================================================================== + HEADER + ========================================================================== */ + +.header { + margin-bottom: 5rem; + text-align: left; +} + +.header__status { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; +} + +.status-dot { + width: 0.75rem; + height: 0.75rem; + background-color: var(--color-smart); + border-radius: 50%; + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.status-label { + font-size: 10px; + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: 0.4em; +} + +.header__title { + font-size: clamp(3rem, 8vw, 4.5rem); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: -0.05em; + line-height: 0.9; + color: var(--color-slate-900); +} + +.text-primary { + color: var(--color-primary); +} + +/* ========================================================================== + SECTIONS + ========================================================================== */ + +.section { + margin-bottom: 6rem; +} + +.section__label { + font-size: 9px; + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.5em; + margin-bottom: 2.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--color-slate-200); +} + +.button-grid { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 2.5rem; +} + +.button-grid--wide { + gap: 4rem; +} + +.button-grid--align-end { + align-items: flex-end; +} + +.button-showcase { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.button-showcase--left { + align-items: flex-start; +} + +.button-showcase__label { + font-size: 8px; + font-weight: var(--font-weight-bold); + color: var(--color-slate-300); + text-transform: uppercase; + letter-spacing: 0.15em; +} + +/* ========================================================================== + BUTTON BASE + ========================================================================== */ + +.btn { + /* Reset */ + border: none; + background: none; + cursor: pointer; + text-decoration: none; + + /* Layout */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + + /* Typography */ + font-family: var(--font-family); + font-size: 10px; + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: 0.2em; + white-space: nowrap; + + /* Spacing (2:1 ratio horizontal:vertical) */ + padding: var(--spacing-md) var(--spacing-xl); + + /* Visual */ + border-radius: var(--radius-xl); + transition: var(--transition-spring); +} + +/* Hover: Float up */ +.btn:hover:not(:disabled) { + transform: translateY(-4px); +} + +/* Active: Spring press */ +.btn:active:not(:disabled) { + transform: translateY(1px) scale(0.96); + transition-duration: 0.1s; +} + +/* Focus visible for accessibility */ +.btn:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* ========================================================================== + BUTTON VARIANTS + ========================================================================== */ + +/* Primary */ +.btn--primary { + background-color: var(--color-primary); + color: white; + box-shadow: 0 15px 30px -5px var(--color-primary-shadow); +} + +.btn--primary:hover:not(:disabled) { + background-color: var(--color-primary-hover); + box-shadow: 0 25px 50px -12px var(--color-primary-shadow-hover); +} + +/* Massive CTA */ +.btn--massive { + padding: 2rem 4rem; + border-radius: var(--radius-massive); + font-size: 12px; + letter-spacing: 0.3em; +} + +/* Smart (AI Gold) */ +.btn--smart { + background-color: var(--color-smart); + color: var(--color-slate-900); + box-shadow: 0 15px 30px -5px var(--color-smart-shadow); +} + +.btn--smart:hover:not(:disabled) { + background-color: var(--color-smart-hover); + box-shadow: 0 25px 50px -12px var(--color-smart-shadow-hover); +} + +/* Secondary Soft */ +.btn--secondary { + background-color: var(--color-slate-100); + color: var(--color-slate-600); +} + +.btn--secondary:hover:not(:disabled) { + background-color: var(--color-slate-200); +} + +/* Outline */ +.btn--outline { + background-color: transparent; + color: var(--color-slate-400); + border: 2px solid var(--color-slate-200); + padding: calc(var(--spacing-md) - 2px) calc(var(--spacing-xl) - 2px); +} + +.btn--outline:hover:not(:disabled) { + border-color: var(--color-primary); + color: var(--color-primary); +} + +/* Dark Inverse */ +.btn--dark { + background-color: var(--color-dark); + color: white; + box-shadow: 0 20px 25px -5px var(--color-dark-shadow); +} + +.btn--dark:hover:not(:disabled) { + box-shadow: 0 25px 50px -12px var(--color-dark-shadow); +} + +/* Danger */ +.btn--danger { + background-color: var(--color-danger-bg); + color: var(--color-danger); + border: 1px solid var(--color-danger-border); +} + +.btn--danger:hover:not(:disabled) { + background-color: var(--color-danger); + color: white; + border-color: var(--color-danger); +} + +/* Success */ +.btn--success { + background-color: var(--color-success); + color: white; + box-shadow: 0 15px 30px -5px var(--color-success-shadow); +} + +.btn--success:hover:not(:disabled) { + background-color: var(--color-success-hover); +} + +/* Ghost */ +.btn--ghost { + background-color: transparent; + color: var(--color-slate-400); + border: 1px solid transparent; +} + +.btn--ghost:hover:not(:disabled) { + background-color: var(--color-slate-100); + border-color: var(--color-slate-100); + color: var(--color-slate-900); +} + +/* Link */ +.btn--link { + background: none; + color: var(--color-slate-900); + padding: 0; + letter-spacing: 0.3em; + font-size: 11px; +} + +.btn--link:hover { + transform: none; +} + +.btn--link .btn__arrow { + width: 1.25rem; + height: 1.25rem; + color: var(--color-primary); + transition: var(--transition-arrow); +} + +.btn--link:hover .btn__arrow { + transform: translateX(0.75rem); +} + +/* Icon Only */ +.btn--icon { + width: 3.5rem; + height: 3.5rem; + padding: 0; + background-color: #eff6ff; + color: var(--color-primary); + border: 1px solid #dbeafe; +} + +.btn--icon svg { + width: 1.5rem; + height: 1.5rem; +} + +.btn--icon:hover:not(:disabled) { + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); +} + +/* ========================================================================== + BUTTON SIZES + ========================================================================== */ + +.btn--xs { + padding: 0.5rem 1rem; + font-size: 8px; + border-radius: var(--radius-md); +} + +.btn--sm { + padding: 0.75rem 1.5rem; + font-size: 9px; + border-radius: var(--radius-lg); +} + +/* Default is MD - no modifier needed */ + +.btn--lg { + padding: 1.5rem 3rem; + font-size: 11px; +} + +.btn--xl { + padding: 1.75rem 3.5rem; + font-size: 12px; + letter-spacing: 0.25em; +} + +.btn--small { + padding: 1rem 2rem; + font-size: 9px; + border-radius: var(--radius-lg); +} + +/* ========================================================================== + BUTTON STATES + ========================================================================== */ + +/* Disabled */ +.btn:disabled, +.btn--disabled { + opacity: 0.4; + cursor: not-allowed; + filter: grayscale(1); + background-color: var(--color-slate-200); + color: var(--color-slate-400); + box-shadow: none; +} + +.btn:disabled:hover, +.btn--disabled:hover { + transform: none; +} + +/* Loading */ +.btn--loading { + cursor: wait; + opacity: 0.8; +} + +/* ========================================================================== + BUTTON ICONS + ========================================================================== */ + +.btn__icon { + width: 1rem; + height: 1rem; + flex-shrink: 0; +} + +.btn__spinner { + width: 1rem; + height: 1rem; + flex-shrink: 0; + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ========================================================================== + FOOTER + ========================================================================== */ + +.footer { + margin-top: 5rem; + padding-top: 2.5rem; + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: 10px; + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================== + RESPONSIVE + ========================================================================== */ + +@media (max-width: 768px) { + .pattern-light { + padding: 3rem 1rem; + } + + .header { + margin-bottom: 3rem; + } + + .section { + margin-bottom: 4rem; + } + + .button-grid { + gap: 1.5rem; + } + + .btn--massive { + padding: 1.5rem 2.5rem; + font-size: 10px; + } +} + +/* ========================================================================== + REDUCED MOTION + ========================================================================== */ + +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } + + .btn:hover:not(:disabled) { + transform: none; + } + + .btn:active:not(:disabled) { + transform: none; + } + + .status-dot { + animation: none; + } + + .btn__spinner { + animation: none; + } +} diff --git a/skills/documatica-v12-design-system/references/buttons.html b/skills/documatica-v12-design-system/references/buttons.html new file mode 100644 index 00000000..b24c6ab9 --- /dev/null +++ b/skills/documatica-v12-design-system/references/buttons.html @@ -0,0 +1,227 @@ + + + + + + Documatica Button Kit v12.0 + + + + + +
+ +
+
+
+ Interactive Protocol v12.0 +
+

+ Библиотека
контролов +

+
+ + +
+

01. Core Action Buttons

+
+ + +
+ + Massive CTA +
+ + +
+ + Primary Action +
+ + +
+ + AI Smart Action +
+ +
+
+ + +
+

02. Secondary & Functional

+
+ + +
+ + Secondary Soft +
+ + +
+ + Outline Style +
+ + +
+ + Dark Inverse +
+ + +
+ + Danger State +
+ +
+
+ + +
+

03. Inline & Navigation

+
+ + +
+ + Перейти в архив + + + + + Inline Link +
+ + +
+ + Icon Button +
+ + +
+ + Status Button +
+ +
+
+ + +
+

04. Special States

+
+ + +
+ + Loading State +
+ + +
+ + Disabled State +
+ + +
+ + Ghost Style +
+ +
+
+ + +
+

05. Size Variants

+
+ +
+ + XS Size +
+ +
+ + SM Size +
+ +
+ + MD Size +
+ +
+ + LG Size +
+ +
+ + XL Size +
+ +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/cards.css b/skills/documatica-v12-design-system/references/cards.css new file mode 100644 index 00000000..7fc4426f --- /dev/null +++ b/skills/documatica-v12-design-system/references/cards.css @@ -0,0 +1,695 @@ +/** + * Documatica Design System v12.0 + * Card Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1200px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@-webkit-keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.card-grid { + display: grid; + gap: var(--spacing-6); +} + +.card-grid--2 { + grid-template-columns: repeat(2, 1fr); +} + +.card-grid--3 { + grid-template-columns: repeat(3, 1fr); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + STAT CARD + ========================================================================= */ + +.stat-card { + display: flex; + flex-direction: column; + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.stat-card--smart { + background: var(--color-smart); + border-color: var(--color-smart); +} + +.stat-card__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-2); +} + +.stat-card--smart .stat-card__label { + color: rgba(0, 0, 0, 0.5); +} + +.stat-card__value { + font-size: var(--font-size-5xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + letter-spacing: var(--tracking-tight); + text-transform: uppercase; +} + +.stat-card--smart .stat-card__value { + color: var(--color-dark); +} + +.stat-card__change { + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); +} + +.stat-card__change--up { + color: var(--color-success); +} + +.stat-card__change--down { + color: var(--color-danger); +} + +.stat-card--smart .stat-card__change { + color: rgba(0, 0, 0, 0.6); +} + +/* ========================================================================= + FEATURE CARD + ========================================================================= */ + +.feature-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + text-decoration: none; + color: inherit; + transition: var(--transition-spring); +} + +.feature-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); + border-color: var(--color-primary); +} + +.feature-card__icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-6); + background: var(--color-slate-50); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + color: var(--color-primary); +} + +.feature-card__icon svg { + width: 24px; + height: 24px; +} + +.feature-card__arrow { + position: absolute; + top: var(--spacing-8); + right: var(--spacing-8); + width: 24px; + height: 24px; + color: var(--color-slate-300); + transition: var(--transition-arrow); +} + +.feature-card:hover .feature-card__arrow { + color: var(--color-primary); + transform: translateX(4px); +} + +.feature-card__tag { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-2); +} + +.feature-card__title { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + color: var(--color-dark); + margin-bottom: var(--spacing-3); +} + +.feature-card__description { + font-size: var(--font-size-xl); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +/* ========================================================================= + PROMO CARD + ========================================================================= */ + +.promo-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + min-height: 280px; +} + +.promo-card--primary { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.promo-card__bar { + width: 40px; + height: 4px; + background: var(--color-primary); + border-radius: var(--radius-full); + margin-bottom: var(--spacing-6); +} + +.promo-card__badge { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border-radius: var(--radius-xl); + color: var(--color-primary); + margin-bottom: var(--spacing-6); +} + +.promo-card__title { + font-size: var(--font-size-4xl); + font-weight: var(--font-weight-black); + line-height: var(--line-height-snug); + color: var(--color-dark); + margin-bottom: var(--spacing-3); +} + +.promo-card--primary .promo-card__title { + color: var(--color-white); +} + +.promo-card__description { + font-size: var(--font-size-xl); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +.promo-card--primary .promo-card__description { + color: rgba(255, 255, 255, 0.8); +} + +.promo-card__visual { + display: flex; + gap: var(--spacing-2); + margin-top: auto; + padding-top: var(--spacing-6); +} + +.promo-card__visual span { + height: 4px; + background: var(--color-slate-200); + border-radius: var(--radius-full); +} + +.promo-card__visual span:first-child { + width: 60px; +} + +.promo-card__visual span:last-child { + width: 30px; +} + +.promo-card__link { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + margin-top: var(--spacing-4); + font-size: var(--font-size-md); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + text-decoration: none; + transition: var(--transition-base); +} + +.promo-card__link:hover { + color: var(--color-primary); +} + +.promo-card__link-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: var(--color-smart); + border-radius: var(--radius-full); + font-size: 16px; + transition: var(--transition-spring); +} + +.promo-card__link:hover .promo-card__link-icon { + transform: translateX(4px); +} + +.promo-card__footer { + margin-top: auto; + padding-top: var(--spacing-6); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: rgba(255, 255, 255, 0.6); +} + +/* ========================================================================= + ARTICLE CARD + ========================================================================= */ + +.article-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + text-decoration: none; + color: inherit; + transition: var(--transition-spring); +} + +.article-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); + border-color: var(--color-primary); +} + +.article-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--spacing-6); +} + +.article-card__tag { + display: inline-block; + padding: var(--spacing-2) var(--spacing-4); + background: var(--color-smart); + border-radius: var(--radius-full); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.article-card__arrow { + width: 24px; + height: 24px; + color: var(--color-slate-300); + transition: var(--transition-arrow); +} + +.article-card:hover .article-card__arrow { + color: var(--color-primary); + transform: translateX(4px); +} + +.article-card__meta { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-3); +} + +.article-card__title { + font-size: var(--font-size-4xl); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-snug); + color: var(--color-dark); + margin-bottom: var(--spacing-4); +} + +.article-card__description { + font-size: var(--font-size-xl); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +/* ========================================================================= + INFO CARD + ========================================================================= */ + +.info-cards-stack { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.info-card { + display: flex; + flex-direction: column; + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + text-decoration: none; + color: inherit; + transition: var(--transition-spring); +} + +.info-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--color-primary); +} + +.info-card__tag { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-2); +} + +.info-card__title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin-bottom: var(--spacing-1); +} + +.info-card__meta { + font-size: var(--font-size-md); + color: var(--color-slate-400); +} + +/* ========================================================================= + CTA CARD + ========================================================================= */ + +.cta-card { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-8); + background: var(--color-dark); + border-radius: var(--radius-2xl); + max-width: 600px; +} + +.cta-card__content { + display: flex; + flex-direction: column; + gap: var(--spacing-1); +} + +.cta-card__title { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-black); + color: var(--color-white); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); +} + +.cta-card__description { + font-size: var(--font-size-md); + color: var(--color-slate-400); +} + +.cta-card__button { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + background: var(--color-white); + border-radius: var(--radius-xl); + color: var(--color-dark); + transition: var(--transition-spring); +} + +.cta-card__button svg { + width: 24px; + height: 24px; +} + +.cta-card__button:hover { + transform: translateX(4px); + background: var(--color-smart); +} + +/* ========================================================================= + LIST CARD + ========================================================================= */ + +.list-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-6); +} + +.list-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + text-decoration: none; + color: inherit; + transition: var(--transition-spring); +} + +.list-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); + border-color: var(--color-primary); +} + +.list-card__icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-6); + background: var(--color-slate-50); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + color: var(--color-primary); +} + +.list-card__icon svg { + width: 24px; + height: 24px; +} + +.list-card__arrow { + position: absolute; + top: var(--spacing-8); + right: var(--spacing-8); + width: 24px; + height: 24px; + color: var(--color-slate-300); + transition: var(--transition-arrow); +} + +.list-card:hover .list-card__arrow { + color: var(--color-primary); + transform: translateX(4px); +} + +.list-card__tag { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-2); +} + +.list-card__title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + color: var(--color-dark); + margin-bottom: var(--spacing-2); +} + +.list-card__description { + font-size: var(--font-size-md); + color: var(--color-slate-500); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .card-grid--3 { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .card-grid--2, + .card-grid--3 { + grid-template-columns: 1fr; + } + + .list-cards { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/cards.html b/skills/documatica-v12-design-system/references/cards.html new file mode 100644 index 00000000..66d26845 --- /dev/null +++ b/skills/documatica-v12-design-system/references/cards.html @@ -0,0 +1,247 @@ + + + + + + Cards — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Layout Protocol v12.0 +
+

+ Карточки +

+
+ + +
+

01. Stat Cards

+
+ + +
+ Всего документов + 1,284 + +12% за неделю +
+ + +
+ AI Аудиты + 856 + 99.8% точность +
+ + +
+ Статус API + Active + 34.2 ms response +
+ +
+
+ + +
+

02. Feature Cards

+
+ + + +
+ + + +
+ + + + Automation +

Автоматизация

+

Интеллектуальные сценарии обработки входящей документации.

+ + + + +
+ + + +
+ + + + Analytics +

Аналитика

+

Глубокий анализ финансовых потоков и юридических метрик.

+ + + + +
+ + + +
+ + + + Security +

Безопасность

+

Шифрование данных по военным стандартам AES-256.

+ + +
+
+ + +
+

03. Promo Cards

+
+ + +
+ +

Ваш бизнес
в потоке.

+

Умная генерация контрактов и отчетов за 30 секунд.

+
+ + +
+ + → + Узнать больше + +
+ + +
+
+ + + +
+

Безупречная
структура

+

Никаких ошибок. Только логика.

+ Documatica 2.0 +
+ +
+
+ + +
+

04. Content Cards

+
+ + + +
+ Featured Guide + + + +
+ Налоговая оптимизация 2026 +

Как ИИ меняет
архитектуру УСН

+

Полный разбор алгоритмов автоматического заполнения деклараций и минимизации рисков при камеральных проверках.

+ + + +
+ + Protocol Update +

Валидация по ИНН за 0.2с

+ Интеграция с ЕГРЮЛ v12.0 + + + AI Insights +

Риски в договорах: NLP Аудит

+ Технический разбор кейсов + +
+ +
+
+ + +
+

05. CTA Card

+
+
+

Больше знаний

+

Перейти в архив публикаций Documatica

+
+ + + + + +
+
+ + +
+

06. List Item Cards

+
+ + +
+ + + +
+ + + + Security +

Шифрование AES-256

+

Защита налоговых данных

+ + + +
+ + + +
+ + + + Tutorial +

API для разработчиков

+

SDK на Python и Node.js

+ + +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/cart.css b/skills/documatica-v12-design-system/references/cart.css new file mode 100644 index 00000000..1aaf16c9 --- /dev/null +++ b/skills/documatica-v12-design-system/references/cart.css @@ -0,0 +1,1034 @@ +/** + * UI Kit v12.0 — Cart + * Shopping cart, mini cart, summary + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--sm { + padding: 10px 20px; + font-size: 13px; +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + CART LAYOUT + ========================================================================= */ + +.cart-wrapper { + display: grid; + grid-template-columns: 1fr 380px; + gap: 32px; + align-items: start; +} + +.cart-main { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; +} + +/* ========================================================================= + CART HEADER + ========================================================================= */ + +.cart-header { + display: grid; + grid-template-columns: 2fr 1fr 120px 1fr 50px; + gap: 16px; + padding: 20px 28px; + background: var(--color-slate-50); + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.15em; + text-transform: uppercase; +} + +.cart-header__col { + text-align: center; +} + +/* ========================================================================= + CART ITEMS + ========================================================================= */ + +.cart-item { + display: grid; + grid-template-columns: 2fr 1fr 120px 1fr 50px; + gap: 16px; + align-items: center; + padding: 24px 28px; + border-bottom: 1px solid var(--color-slate-100); +} + +.cart-item:last-child { + border-bottom: none; +} + +.cart-item__product { + display: flex; + gap: 20px; + align-items: center; +} + +.cart-item__image { + width: 80px; + height: 80px; + border-radius: 16px; + overflow: hidden; + background: var(--color-slate-100); + flex-shrink: 0; +} + +.cart-item__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.cart-item__info { + display: flex; + flex-direction: column; + gap: 4px; +} + +.cart-item__name { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0; + line-height: 1.3; +} + +.cart-item__meta { + font-size: 13px; + color: var(--color-slate-400); +} + +.cart-item__status { + font-size: 12px; + font-weight: 600; +} + +.cart-item__status--success { + color: var(--color-success); +} + +.cart-item__status--warning { + color: #d97706; +} + +.cart-item__status--danger { + color: #dc2626; +} + +.cart-item__price { + text-align: center; + font-size: 15px; + font-weight: 600; + color: var(--color-dark); +} + +.cart-item__price--sale { + display: block; + color: #dc2626; + font-weight: 700; +} + +.cart-item__price--old { + display: block; + font-size: 13px; + color: var(--color-slate-400); + text-decoration: line-through; +} + +.cart-item__quantity { + display: flex; + justify-content: center; +} + +.qty-control { + display: inline-flex; + align-items: center; + background: var(--color-slate-100); + border-radius: 12px; + overflow: hidden; +} + +.qty-btn { + width: 36px; + height: 36px; + background: transparent; + border: none; + font-size: 18px; + font-weight: 500; + color: var(--color-slate-500); + cursor: pointer; + transition: color 0.2s ease; +} + +.qty-btn:hover { + color: var(--color-dark); +} + +.qty-value { + width: 40px; + text-align: center; + font-size: 15px; + font-weight: 700; + color: var(--color-dark); +} + +.cart-item__total { + text-align: center; + font-size: 17px; + font-weight: 900; + color: var(--color-dark); +} + +.cart-item__remove { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: transparent; + border: none; + border-radius: 12px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.cart-item__remove:hover { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +/* ========================================================================= + CART SUMMARY + ========================================================================= */ + +.cart-summary { + background: var(--color-white); + border-radius: 24px; + padding: 28px; + position: sticky; + top: 24px; +} + +.cart-summary__title { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.15em; + margin: 0 0 24px 0; +} + +.cart-summary__row { + display: flex; + justify-content: space-between; + padding: 14px 0; + border-bottom: 1px solid var(--color-slate-100); + font-size: 15px; + color: var(--color-slate-600); +} + +.cart-summary__row span:last-child { + font-weight: 600; + color: var(--color-dark); +} + +.text-danger { + color: #dc2626 !important; +} + +.text-success { + color: var(--color-success) !important; +} + +.cart-summary__promo { + display: flex; + gap: 8px; + margin: 20px 0; +} + +.promo-input { + flex: 1; + padding: 14px 18px; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.promo-input::placeholder { + color: var(--color-slate-400); +} + +.promo-btn { + padding: 14px 20px; + background: var(--color-dark); + border: none; + border-radius: 12px; + font-family: inherit; + font-size: 14px; + font-weight: 700; + color: var(--color-white); + cursor: pointer; + transition: all 0.2s ease; +} + +.promo-btn:hover { + background: var(--color-primary); +} + +.cart-summary__total { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + border-top: 2px solid var(--color-slate-100); + margin-top: 8px; + font-size: 14px; + font-weight: 700; + color: var(--color-slate-500); + letter-spacing: 0.1em; +} + +.cart-summary__total-value { + font-size: 28px; + font-weight: 900; + color: var(--color-dark); +} + +.cart-summary__secure { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + margin-top: 16px; + font-size: 13px; + color: var(--color-slate-400); +} + +.cart-summary__secure svg { + color: var(--color-success); +} + +/* ========================================================================= + MINI CART + ========================================================================= */ + +.mini-cart-demo { + display: flex; + justify-content: center; +} + +.mini-cart { + width: 340px; + background: var(--color-white); + border-radius: 24px; + box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); + overflow: hidden; +} + +.mini-cart__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid var(--color-slate-100); +} + +.mini-cart__title { + display: flex; + align-items: center; + gap: 10px; + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +.mini-cart__title svg { + color: var(--color-primary); +} + +.mini-cart__count { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: var(--color-primary); + border-radius: 50%; + font-size: 13px; + font-weight: 700; + color: var(--color-white); +} + +.mini-cart__items { + max-height: 260px; + overflow-y: auto; +} + +.mini-item { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 24px; + border-bottom: 1px solid var(--color-slate-100); +} + +.mini-item:last-child { + border-bottom: none; +} + +.mini-item__image { + width: 56px; + height: 56px; + border-radius: 12px; + overflow: hidden; + background: var(--color-slate-100); + flex-shrink: 0; +} + +.mini-item__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mini-item__info { + flex: 1; + min-width: 0; +} + +.mini-item__name { + display: block; + font-size: 14px; + font-weight: 600; + color: var(--color-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.mini-item__meta { + font-size: 13px; + color: var(--color-slate-400); +} + +.mini-item__remove { + width: 28px; + height: 28px; + background: var(--color-slate-100); + border: none; + border-radius: 50%; + font-size: 18px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.mini-item__remove:hover { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.mini-cart__footer { + padding: 20px 24px; + background: var(--color-slate-50); +} + +.mini-cart__total { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + font-size: 14px; + color: var(--color-slate-500); +} + +.mini-cart__total-value { + font-size: 18px; + font-weight: 900; + color: var(--color-dark); +} + +.mini-cart__actions { + display: flex; + gap: 10px; +} + +.mini-cart__actions .btn { + flex: 1; +} + +/* ========================================================================= + STATES + ========================================================================= */ + +.states-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} + +.state-card { + background: var(--color-white); + border-radius: 16px; + padding: 24px; + text-align: center; +} + +.state-card__badge { + display: inline-block; + padding: 8px 14px; + border-radius: 10px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.1em; + margin-bottom: 12px; +} + +.state-card__badge--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.state-card__badge--warning { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.state-card__badge--danger { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.state-card__badge--info { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.state-card__text { + font-size: 13px; + color: var(--color-slate-500); + margin: 0; +} + +/* ========================================================================= + EMPTY CART + ========================================================================= */ + +.empty-cart { + text-align: center; + padding: 80px 40px; + background: var(--color-white); + border-radius: 28px; +} + +.empty-cart__icon { + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 120px; + margin: 0 auto 32px; + background: var(--color-slate-100); + border-radius: 50%; + color: var(--color-slate-400); +} + +.empty-cart__title { + font-size: 32px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 12px 0; + text-transform: uppercase; + letter-spacing: -0.01em; +} + +.empty-cart__title span { + color: var(--color-primary); +} + +.empty-cart__text { + font-size: 16px; + color: var(--color-slate-500); + margin: 0 0 32px 0; +} + +/* ========================================================================= + PROMO CODES + ========================================================================= */ + +.promo-cards { + display: flex; + flex-direction: column; + gap: 16px; +} + +.promo-card { + display: flex; + align-items: center; + gap: 20px; + padding: 24px; + background: var(--color-white); + border: 2px dashed var(--color-slate-200); + border-radius: 20px; +} + +.promo-card--applied { + border-style: solid; + border-color: var(--color-success); + background: rgba(16, 185, 129, 0.05); +} + +.promo-card__icon { + display: flex; + align-items: center; + justify-content: center; + width: 52px; + height: 52px; + background: var(--color-slate-100); + border-radius: 14px; + color: var(--color-slate-500); +} + +.promo-card--applied .promo-card__icon { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.promo-card__content { + flex: 1; +} + +.promo-card__code { + display: block; + font-size: 18px; + font-weight: 900; + color: var(--color-dark); + letter-spacing: 0.1em; +} + +.promo-card__desc { + font-size: 14px; + color: var(--color-slate-500); +} + +.promo-card__value { + font-size: 20px; + font-weight: 900; + color: var(--color-success); +} + +.promo-card__apply { + padding: 12px 24px; + background: var(--color-primary); + border: none; + border-radius: 12px; + font-family: inherit; + font-size: 14px; + font-weight: 700; + color: var(--color-white); + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; +} + +.promo-card__apply:hover { + background: #2563eb; +} + +/* ========================================================================= + SHIPPING OPTIONS + ========================================================================= */ + +.shipping-options { + display: flex; + flex-direction: column; + gap: 12px; +} + +.shipping-option { + display: flex; + align-items: center; + gap: 16px; + padding: 20px 24px; + background: var(--color-white); + border: 2px solid var(--color-slate-100); + border-radius: 18px; + cursor: pointer; + transition: all 0.2s ease; +} + +.shipping-option:hover { + border-color: var(--color-slate-300); +} + +.shipping-option--selected, +.shipping-option:has(input:checked) { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.03); +} + +.shipping-option input { + display: none; +} + +.shipping-option__radio { + width: 22px; + height: 22px; + border: 2px solid var(--color-slate-300); + border-radius: 50%; + position: relative; + transition: all 0.2s ease; +} + +.shipping-option:has(input:checked) .shipping-option__radio { + border-color: var(--color-primary); +} + +.shipping-option:has(input:checked) .shipping-option__radio::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + background: var(--color-primary); + border-radius: 50%; +} + +.shipping-option__icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: var(--color-slate-100); + border-radius: 14px; + color: var(--color-slate-500); +} + +.shipping-option:has(input:checked) .shipping-option__icon { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.shipping-option__content { + flex: 1; +} + +.shipping-option__title { + display: block; + font-size: 15px; + font-weight: 700; + color: var(--color-dark); + margin-bottom: 2px; +} + +.shipping-option__desc { + font-size: 13px; + color: var(--color-slate-500); +} + +.shipping-option__price { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +/* ========================================================================= + FLOATING CART BUTTON + ========================================================================= */ + +.floating-demo { + display: flex; + justify-content: center; + padding: 40px; +} + +.cart-floating { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + background: var(--color-primary); + border: none; + border-radius: 50%; + color: var(--color-white); + cursor: pointer; + box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35); + transition: all 0.3s ease; +} + +.cart-floating:hover { + transform: scale(1.1); + box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4); +} + +.cart-floating__count { + position: absolute; + top: -4px; + right: -4px; + display: flex; + align-items: center; + justify-content: center; + min-width: 24px; + height: 24px; + padding: 0 6px; + background: var(--color-smart); + border-radius: 12px; + font-size: 12px; + font-weight: 700; + color: var(--color-dark); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .cart-wrapper { + grid-template-columns: 1fr; + } + + .cart-summary { + position: static; + } + + .cart-header { + display: none; + } + + .cart-item { + grid-template-columns: 1fr auto; + grid-template-rows: auto auto; + } + + .cart-item__product { + grid-column: 1 / -1; + } + + .cart-item__price, + .cart-item__total { + text-align: left; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .states-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .states-grid { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/cart.html b/skills/documatica-v12-design-system/references/cart.html new file mode 100644 index 00000000..00a99a3d --- /dev/null +++ b/skills/documatica-v12-design-system/references/cart.html @@ -0,0 +1,435 @@ + + + + + + Cart — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● ECOMMERCE +

SHOPPING
CART

+

Корзина покупок: список товаров, количество, промокоды и итог.

+
+ + +
+
+ 01 +

CART TABLE

+
+ +
+
+
+ ТОВАР + ЦЕНА + КОЛ-ВО + ИТОГО + +
+ +
+
+
+ Product +
+
+

Smart Watch Series X

+ Цвет: Чёрный · Размер: M + ● В наличии +
+
+
24 990 ₽
+
+
+ + 1 + +
+
+
24 990 ₽
+ +
+ +
+
+
+ Product +
+
+

Headphones Pro Max

+ Цвет: Серебро + ● В наличии +
+
+
34 990 ₽
+
+
+ + 2 + +
+
+
69 980 ₽
+ +
+ +
+
+
+ Product +
+
+

Running Pro Max

+ Размер: 42 + ● Осталось 2 шт +
+
+
+ 11 990 ₽ + 16 990 ₽ +
+
+
+ + 1 + +
+
+
11 990 ₽
+ +
+
+ + +
+
+ + +
+
+ 02 +

MINI CART

+
+ +
+
+
+

+ + + + + Корзина +

+ 3 +
+ +
+
+
+ +
+
+ Smart Watch Series X + 1 × 24 990 ₽ +
+ +
+
+
+ +
+
+ Headphones Pro Max + 2 × 34 990 ₽ +
+ +
+
+ +
+
+ Итого: + 94 970 ₽ +
+
+ Корзина + Оформить +
+
+
+
+
+ + +
+
+ 03 +

ITEM STATES

+
+ +
+
+ ● В НАЛИЧИИ +

Товар готов к отправке

+
+
+ ● МАЛО +

Осталось менее 5 штук

+
+
+ ● НЕТ В НАЛИЧИИ +

Ожидается поставка

+
+
+ ● ПРЕДЗАКАЗ +

Доступен для предзаказа

+
+
+
+ + +
+
+ 04 +

EMPTY STATE

+
+ +
+
+ + + + +
+

КОРЗИНА ПУСТА

+

Добавьте товары, чтобы оформить заказ

+ Перейти в каталог +
+
+ + +
+
+ 05 +

PROMO CODES

+
+ +
+
+
+ + + +
+
+ WELCOME20 + Скидка 20% на первый заказ +
+ −5 000 ₽ +
+ +
+
+ + + +
+
+ SUMMER15 + Скидка 15% на летнюю коллекцию +
+ +
+
+
+ + +
+
+ 06 +

SHIPPING OPTIONS

+
+ +
+ + + + + +
+
+ + +
+
+ 07 +

FLOATING BUTTON

+
+ +
+ +
+
+ + +
+
+ 08 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<div class="cart-item">
+  <div class="cart-item__product">
+    <div class="cart-item__image">...</div>
+    <div class="cart-item__info">
+      <h3 class="cart-item__name">Название</h3>
+      <span class="cart-item__status cart-item__status--success">● В наличии</span>
+    </div>
+  </div>
+  <div class="cart-item__price">24 990 ₽</div>
+  <div class="cart-item__quantity">...</div>
+  <div class="cart-item__total">24 990 ₽</div>
+</div>
+
+/* Модификаторы статусов */
+.cart-item__status--success   /* Зелёный */
+.cart-item__status--warning   /* Жёлтый */
+.cart-item__status--danger    /* Красный */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/category.css b/skills/documatica-v12-design-system/references/category.css new file mode 100644 index 00000000..0fda1126 --- /dev/null +++ b/skills/documatica-v12-design-system/references/category.css @@ -0,0 +1,1013 @@ +/** + * UI Kit v12.0 — Category Page + * Catalog components: categories, filters, product grid + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 64px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-200); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 24px; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--full { + width: 100%; +} + +.btn--icon { + width: 44px; + height: 44px; + padding: 0; +} + +/* ========================================================================= + CATEGORY CARDS + ========================================================================= */ + +.category-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} + +.category-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 24px; + background: var(--color-white); + border-radius: 20px; + text-decoration: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.category-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); +} + +.category-card__icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(59, 130, 246, 0.1); + border-radius: 20px; + color: var(--color-primary); + margin-bottom: 16px; +} + +.category-card__icon--gold { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.category-card__icon--green { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.category-card__icon--purple { + background: rgba(139, 92, 246, 0.15); + color: #7c3aed; +} + +.category-card__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.category-card__count { + font-size: 13px; + color: var(--color-slate-400); +} + +/* ========================================================================= + CATEGORY WITH IMAGE + ========================================================================= */ + +.category-image-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.category-image { + position: relative; + display: block; + border-radius: 20px; + overflow: hidden; + text-decoration: none; +} + +.category-image img { + width: 100%; + height: 200px; + object-fit: cover; + display: block; + transition: transform 0.3s ease; +} + +.category-image:hover img { + transform: scale(1.05); +} + +.category-image__overlay { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 24px; + background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); +} + +.category-image__title { + font-size: 20px; + font-weight: 700; + color: var(--color-white); + margin: 0; +} + +.category-image__count { + font-size: 14px; + color: rgba(255, 255, 255, 0.8); +} + +/* ========================================================================= + BREADCRUMBS + ========================================================================= */ + +.breadcrumbs { + display: flex; + align-items: center; + gap: 8px; + padding: 16px 24px; + background: var(--color-white); + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.breadcrumbs__link { + font-size: 14px; + color: var(--color-slate-500); + text-decoration: none; + transition: color 0.2s ease; +} + +.breadcrumbs__link:hover { + color: var(--color-primary); +} + +.breadcrumbs__sep { + color: var(--color-slate-300); +} + +.breadcrumbs__current { + font-size: 14px; + font-weight: 600; + color: var(--color-dark); +} + +/* ========================================================================= + FILTER BAR + ========================================================================= */ + +.filter-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + background: var(--color-white); + border-radius: 16px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.filter-bar__count { + font-size: 15px; + color: var(--color-slate-500); +} + +.filter-bar__actions { + display: flex; + align-items: center; + gap: 12px; +} + +.filter-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + background: var(--color-slate-100); + border: none; + border-radius: 10px; + font-family: inherit; + font-size: 14px; + font-weight: 500; + color: var(--color-dark); + cursor: pointer; + transition: all 0.2s ease; +} + +.filter-btn:hover { + background: var(--color-slate-200); +} + +.sort-select { + padding: 10px 36px 10px 16px; + background: var(--color-slate-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat; + border: none; + border-radius: 10px; + font-family: inherit; + font-size: 14px; + color: var(--color-dark); + cursor: pointer; + appearance: none; +} + +.view-toggle { + display: flex; + gap: 4px; + padding: 4px; + background: var(--color-slate-100); + border-radius: 10px; +} + +.view-toggle__btn { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + border-radius: 8px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.view-toggle__btn--active { + background: var(--color-white); + color: var(--color-dark); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* ========================================================================= + ACTIVE FILTERS + ========================================================================= */ + +.active-filters { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + background: var(--color-white); + border-radius: 16px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.active-filters__list { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.filter-tag { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + background: rgba(59, 130, 246, 0.1); + border-radius: 8px; + font-size: 13px; + font-weight: 500; + color: var(--color-primary); +} + +.filter-tag__remove { + display: flex; + padding: 0; + background: none; + border: none; + color: var(--color-primary); + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s ease; +} + +.filter-tag__remove:hover { + opacity: 1; +} + +.active-filters__clear { + padding: 0; + background: none; + border: none; + font-family: inherit; + font-size: 14px; + font-weight: 500; + color: var(--color-slate-400); + cursor: pointer; + transition: color 0.2s ease; +} + +.active-filters__clear:hover { + color: var(--color-danger); +} + +/* ========================================================================= + FILTER SIDEBAR + ========================================================================= */ + +.filter-sidebar { + max-width: 280px; + padding: 24px; + background: var(--color-white); + border-radius: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.filter-group { + margin-bottom: 24px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-slate-100); +} + +.filter-group:last-of-type { + margin-bottom: 24px; +} + +.filter-group__title { + font-size: 14px; + font-weight: 700; + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0 0 16px 0; +} + +.filter-list { + list-style: none; + padding: 0; + margin: 0; +} + +.filter-list__item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; +} + +.filter-list__item a { + font-size: 14px; + color: var(--color-slate-500); + text-decoration: none; + transition: color 0.2s ease; +} + +.filter-list__item a:hover, +.filter-list__item--active a { + color: var(--color-primary); +} + +.filter-list__count { + font-size: 12px; + color: var(--color-slate-400); +} + +/* Price Range */ +.price-range { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +.price-range__input { + flex: 1; + padding: 10px 12px; + background: var(--color-slate-50); + border: 1px solid var(--color-slate-200); + border-radius: 8px; + font-family: inherit; + font-size: 14px; + color: var(--color-dark); +} + +.price-range__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.price-range__sep { + color: var(--color-slate-300); +} + +.price-slider { + padding: 8px 0; +} + +.price-slider__track { + position: relative; + height: 4px; + background: var(--color-slate-200); + border-radius: 2px; +} + +.price-slider__fill { + position: absolute; + height: 100%; + background: var(--color-primary); + border-radius: 2px; +} + +/* Checkbox Filter */ +.filter-checkbox-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.filter-checkbox { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; +} + +.filter-checkbox input { + display: none; +} + +.filter-checkbox__mark { + width: 20px; + height: 20px; + border: 2px solid var(--color-slate-300); + border-radius: 6px; + transition: all 0.2s ease; +} + +.filter-checkbox input:checked + .filter-checkbox__mark { + background: var(--color-primary); + border-color: var(--color-primary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; +} + +.filter-checkbox__label { + flex: 1; + font-size: 14px; + color: var(--color-slate-600); +} + +.filter-checkbox__count { + font-size: 12px; + color: var(--color-slate-400); +} + +/* Toggle Switch */ +.toggle-switch { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; +} + +.toggle-switch input { + display: none; +} + +.toggle-switch__slider { + width: 44px; + height: 24px; + background: var(--color-slate-300); + border-radius: 12px; + position: relative; + transition: background 0.2s ease; +} + +.toggle-switch__slider::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: var(--color-white); + border-radius: 50%; + transition: transform 0.2s ease; +} + +.toggle-switch input:checked + .toggle-switch__slider { + background: var(--color-primary); +} + +.toggle-switch input:checked + .toggle-switch__slider::after { + transform: translateX(20px); +} + +.toggle-switch__label { + font-size: 14px; + color: var(--color-slate-600); +} + +/* ========================================================================= + PRODUCT GRID + ========================================================================= */ + +.product-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.product-card { + position: relative; + background: var(--color-white); + border-radius: 20px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.product-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); +} + +.product-card__badge { + position: absolute; + top: 16px; + left: 16px; + padding: 6px 12px; + background: var(--color-primary); + border-radius: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-white); + z-index: 1; +} + +.product-card__badge--sale { + background: var(--color-danger); +} + +.product-card__badge--new { + background: var(--color-success); +} + +.product-card__image { + position: relative; + height: 200px; + background: var(--color-slate-50); +} + +.product-card__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-card__favorite { + position: absolute; + top: 16px; + right: 16px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: none; + border-radius: 50%; + color: var(--color-slate-400); + cursor: pointer; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; +} + +.product-card__favorite:hover { + color: var(--color-danger); +} + +.product-card__favorite--active { + color: var(--color-danger); +} + +.product-card__content { + padding: 20px; +} + +.product-card__category { + font-size: 12px; + font-weight: 500; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.product-card__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 4px 0 8px; +} + +.product-card__rating { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 12px; +} + +.rating-stars { + color: var(--color-smart); + font-size: 14px; +} + +.rating-count { + font-size: 13px; + color: var(--color-slate-400); +} + +.product-card__prices { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.product-card__price { + font-size: 20px; + font-weight: 800; + color: var(--color-dark); +} + +.product-card__old-price { + font-size: 14px; + color: var(--color-slate-400); + text-decoration: line-through; +} + +/* ========================================================================= + PRODUCT LIST VIEW + ========================================================================= */ + +.product-list { + display: flex; + flex-direction: column; + gap: 16px; +} + +.product-row { + display: flex; + gap: 24px; + padding: 20px; + background: var(--color-white); + border-radius: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.product-row__image { + width: 160px; + height: 160px; + border-radius: 16px; + overflow: hidden; + flex-shrink: 0; +} + +.product-row__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-row__content { + flex: 1; +} + +.product-row__category { + display: inline-block; + font-size: 12px; + font-weight: 500; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 4px; +} + +.product-row__title { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; +} + +.product-row__desc { + font-size: 14px; + color: var(--color-slate-500); + line-height: 1.5; + margin: 0 0 12px 0; +} + +.product-row__rating { + display: flex; + align-items: center; + gap: 8px; +} + +.product-row__actions { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 12px; +} + +.product-row__price { + font-size: 24px; + font-weight: 800; + color: var(--color-dark); +} + +/* ========================================================================= + EMPTY STATE + ========================================================================= */ + +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 64px 32px; + background: var(--color-white); + border-radius: 24px; + text-align: center; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.empty-state__icon { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: 50%; + color: var(--color-slate-400); + margin-bottom: 24px; +} + +.empty-state__title { + font-size: 24px; + font-weight: 800; + color: var(--color-dark); + margin: 0 0 8px 0; +} + +.empty-state__desc { + font-size: 16px; + color: var(--color-slate-500); + max-width: 360px; + margin: 0 0 24px 0; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .category-grid { + grid-template-columns: repeat(2, 1fr); + } + + .product-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .category-grid, + .category-image-grid { + grid-template-columns: 1fr; + } + + .product-grid { + grid-template-columns: 1fr; + } + + .filter-bar { + flex-direction: column; + gap: 16px; + align-items: stretch; + } + + .filter-bar__actions { + flex-wrap: wrap; + } + + .product-row { + flex-direction: column; + } + + .product-row__image { + width: 100%; + height: 200px; + } + + .product-row__actions { + flex-direction: row; + align-items: center; + } + + .active-filters { + flex-direction: column; + gap: 16px; + align-items: flex-start; + } +} diff --git a/skills/documatica-v12-design-system/references/category.html b/skills/documatica-v12-design-system/references/category.html new file mode 100644 index 00000000..2892d2b7 --- /dev/null +++ b/skills/documatica-v12-design-system/references/category.html @@ -0,0 +1,502 @@ + + + + + + Category — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ CATALOG +

Category Page

+

Компоненты каталога: категории, фильтры, сортировка, сетки товаров.

+
+ + +
+
+ 01 +

Category Cards

+
+ +
+ +
+ + + + +
+

Электроника

+ 1,240 товаров + + +
+ + + + +
+

Одежда

+ 3,890 товаров + + +
+ + + + +
+

Дом и сад

+ 2,150 товаров + + +
+ + + +
+

Спорт

+ 876 товаров + +
+
+ + +
+
+ 02 +

Category with Image

+
+ +
+ + Watches +
+

Часы

+ 320 товаров +
+ + + Skincare +
+

Косметика

+ 890 товаров +
+ + + Sneakers +
+

Обувь

+ 1,250 товаров +
+ +
+
+ + +
+
+ 03 +

Breadcrumbs

+
+ + +
+ + +
+
+ 04 +

Filter Bar

+
+ +
+
+ 1,240 товаров +
+
+ +
+ +
+
+ + +
+
+
+
+ + +
+
+ 05 +

Active Filters

+
+ +
+
+ + Apple + + + + от 50 000 ₽ + + + + В наличии + + +
+ +
+
+ + +
+
+ 06 +

Filter Sidebar

+
+ +
+
+

Категория

+ +
+ +
+

Цена

+
+ + — + +
+
+
+
+
+
+
+ +
+

Бренд

+
+ + + + +
+
+ +
+

Наличие

+ +
+ + +
+
+ + +
+
+ 07 +

Product Grid

+
+ +
+
+
Хит
+
+ iPhone + +
+
+ Смартфоны +

iPhone 15 Pro 256GB

+
+ ★★★★★ + 4.9 (128) +
+
+ 124 990 ₽ +
+ +
+
+ +
+
-20%
+
+ Samsung + +
+
+ Смартфоны +

Samsung Galaxy S24 Ultra

+
+ ★★★★☆ + 4.7 (89) +
+
+ 99 990 ₽ + 124 990 ₽ +
+ +
+
+ +
+
New
+
+ Xiaomi + +
+
+ Смартфоны +

Xiaomi 14 Pro

+
+ ★★★★★ + 4.8 (52) +
+
+ 74 990 ₽ +
+ +
+
+
+
+ + +
+
+ 08 +

Product List View

+
+ +
+
+
+ iPhone +
+
+ Смартфоны +

iPhone 15 Pro 256GB

+

Титановый корпус, камера 48 Мп, чип A17 Pro, Dynamic Island. Самый мощный iPhone.

+
+ ★★★★★ + 4.9 (128 отзывов) +
+
+
+
+ 124 990 ₽ +
+ + +
+
+
+
+ + +
+
+ 09 +

Empty State

+
+ +
+
+ + + +
+

Ничего не найдено

+

Попробуйте изменить параметры поиска или сбросить фильтры

+ +
+
+ + +
+
+ 10 +

Использование

+
+ +
+ 
/* Карточки категорий */
+<div class="category-grid">
+  <a class="category-card">...</a>
+</div>
+
+<div class="category-image-grid">
+  <a class="category-image">...</a>
+</div>
+
+/* Навигация */
+<nav class="breadcrumbs">...</nav>
+<div class="filter-bar">...</div>
+<div class="active-filters">...</div>
+
+/* Фильтры */
+<div class="filter-sidebar">
+  <div class="filter-group">...</div>
+</div>
+
+/* Товары */
+<div class="product-grid">...</div>
+<div class="product-list">...</div>
+
+/* Пустое состояние */
+<div class="empty-state">...</div>
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/chat.css b/skills/documatica-v12-design-system/references/chat.css new file mode 100644 index 00000000..44b0c13b --- /dev/null +++ b/skills/documatica-v12-design-system/references/chat.css @@ -0,0 +1,590 @@ +/** + * Documatica Design System v12.0 + * Chat Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + CHAT WINDOW + ========================================================================= */ + +.chat-window { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + padding: var(--spacing-6); + background: var(--color-slate-50); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.chat-window--ai { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +/* ========================================================================= + CHAT MESSAGE + ========================================================================= */ + +.chat-message { + display: flex; + flex-direction: column; + max-width: 80%; +} + +.chat-message--sent { + align-self: flex-end; + align-items: flex-end; +} + +.chat-message--received { + align-self: flex-start; + align-items: flex-start; +} + +.chat-message--with-avatar { + flex-direction: row; + gap: var(--spacing-3); + max-width: 85%; +} + +.chat-message--ai { + flex-direction: row; + gap: var(--spacing-3); + max-width: 90%; +} + +/* ========================================================================= + CHAT BUBBLE + ========================================================================= */ + +.chat-bubble { + padding: var(--spacing-3) var(--spacing-4); + border-radius: var(--radius-xl); +} + +.chat-message--sent .chat-bubble { + background: var(--color-primary); + color: var(--color-white); + border-bottom-right-radius: var(--radius-sm); +} + +.chat-message--received .chat-bubble { + background: var(--color-white); + color: var(--color-dark); + border-bottom-left-radius: var(--radius-sm); +} + +.chat-bubble p { + margin: 0; + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); +} + +.chat-bubble--ai { + background: var(--color-slate-800); + color: var(--color-slate-200); + border-bottom-left-radius: var(--radius-sm); +} + +.chat-bubble--ai strong { + color: var(--color-smart); +} + +/* ========================================================================= + CHAT AVATAR + ========================================================================= */ + +.chat-avatar { + position: relative; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.chat-avatar--ai { + background: var(--color-smart); + color: var(--color-dark); +} + +.chat-avatar--ai svg { + width: 24px; + height: 24px; +} + +.status-indicator { + position: absolute; + bottom: 0; + right: 0; + width: 12px; + height: 12px; + border: 2px solid var(--color-white); + border-radius: var(--radius-full); +} + +.status-indicator--online { + background: var(--color-success); +} + +/* ========================================================================= + CHAT META + ========================================================================= */ + +.chat-content { + display: flex; + flex-direction: column; + gap: var(--spacing-1); +} + +.chat-name { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); +} + +.chat-name--ai { + color: var(--color-smart); +} + +.chat-time { + font-size: var(--font-size-xs); + color: var(--color-slate-400); + margin-top: var(--spacing-1); +} + +.chat-status { + display: flex; + align-items: center; + gap: var(--spacing-1); + font-size: var(--font-size-xs); + color: var(--color-slate-400); + margin-top: var(--spacing-1); +} + +.chat-status svg { + width: 14px; + height: 14px; +} + +.chat-status--delivered svg { + color: var(--color-slate-500); +} + +.chat-status--read svg { + color: var(--color-primary); +} + +/* ========================================================================= + ATTACHMENTS + ========================================================================= */ + +.chat-attachment { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-top: var(--spacing-3); + padding: var(--spacing-3); + background: var(--color-slate-50); + border-radius: var(--radius-lg); +} + +.attachment-icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-lg); +} + +.attachment-icon svg { + width: 20px; + height: 20px; + color: var(--color-primary); +} + +.attachment-info { + flex: 1; + display: flex; + flex-direction: column; +} + +.attachment-name { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.attachment-size { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +.attachment-download { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--color-primary); + cursor: pointer; + transition: var(--transition-base); +} + +.attachment-download:hover { + color: #2563eb; +} + +.attachment-download svg { + width: 20px; + height: 20px; +} + +.chat-image { + margin-top: var(--spacing-2); +} + +.image-placeholder { + padding: var(--spacing-8); + background: rgba(255, 255, 255, 0.2); + border-radius: var(--radius-lg); + text-align: center; + font-size: var(--font-size-lg); +} + +/* ========================================================================= + TYPING INDICATOR + ========================================================================= */ + +.chat-bubble--typing { + padding: var(--spacing-4); +} + +.typing-dots { + display: flex; + gap: var(--spacing-1); +} + +.typing-dots span { + width: 8px; + height: 8px; + background: var(--color-slate-400); + border-radius: var(--radius-full); + animation: typing 1.4s ease-in-out infinite; +} + +.typing-dots span:nth-child(2) { + animation-delay: 0.2s; +} + +.typing-dots span:nth-child(3) { + animation-delay: 0.4s; +} + +@keyframes typing { + 0%, 60%, 100% { transform: translateY(0); } + 30% { transform: translateY(-6px); } +} + +/* ========================================================================= + AI RESULTS + ========================================================================= */ + +.ai-results { + display: flex; + flex-direction: column; + gap: var(--spacing-2); + margin-top: var(--spacing-3); +} + +.ai-result { + display: flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-3); + background: var(--color-slate-700); + border-radius: var(--radius-lg); + font-size: var(--font-size-sm); + cursor: pointer; + transition: var(--transition-base); +} + +.ai-result:hover { + background: var(--color-slate-600); +} + +.ai-result svg { + width: 18px; + height: 18px; + color: var(--color-primary); +} + +.ai-result--more { + justify-content: center; + color: var(--color-primary); + font-weight: var(--font-weight-medium); +} + +/* ========================================================================= + CHAT INPUT + ========================================================================= */ + +.chat-input-wrapper { + padding: var(--spacing-4); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.chat-input { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.chat-input input { + flex: 1; + padding: var(--spacing-3); + font-family: var(--font-family); + font-size: var(--font-size-base); + color: var(--color-dark); + background: transparent; + border: none; + outline: none; +} + +.chat-input input::placeholder { + color: var(--color-slate-400); +} + +.chat-input__action { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.chat-input__action:hover { + color: var(--color-primary); +} + +.chat-input__action svg { + width: 22px; + height: 22px; +} + +.chat-input__send { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border: none; + border-radius: var(--radius-full); + color: var(--color-white); + cursor: pointer; + transition: var(--transition-spring); +} + +.chat-input__send svg { + width: 22px; + height: 22px; +} + +.chat-input__send:hover { + transform: scale(1.05); + box-shadow: var(--shadow-md); +} + +/* ========================================================================= + CHAT HEADER + ========================================================================= */ + +.chat-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.chat-header__user { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.chat-header__info { + display: flex; + flex-direction: column; +} + +.chat-header__name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.chat-header__status { + font-size: var(--font-size-sm); + color: var(--color-success); +} + +.chat-header__actions { + display: flex; + gap: var(--spacing-1); +} + +.chat-header__btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--color-slate-500); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.chat-header__btn:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.chat-header__btn svg { + width: 22px; + height: 22px; +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .chat-message { + max-width: 90%; + } +} diff --git a/skills/documatica-v12-design-system/references/chat.html b/skills/documatica-v12-design-system/references/chat.html new file mode 100644 index 00000000..84a05833 --- /dev/null +++ b/skills/documatica-v12-design-system/references/chat.html @@ -0,0 +1,296 @@ + + + + + + Chat — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Chat Protocol v12.0 +
+

+ Chat +

+
+ + +
+

01. Basic Chat Bubbles

+
+
+
+

Привет! Чем могу помочь?

+
+ 10:30 +
+
+
+

Как загрузить документы?

+
+ 10:31 +
+
+
+

Просто перетащите файлы в окно загрузки или нажмите кнопку "Загрузить"

+
+ 10:31 +
+
+
+ + +
+

02. With Avatars

+
+
+
АП
+
+ Анна Петрова +
+

Документы готовы к проверке

+
+ Вчера, 15:45 +
+
+
+
+

Отлично, сейчас посмотрю!

+
+ Вчера, 15:47 +
+
+
+ + +
+

03. Message States

+
+
+
+

Отправлено

+
+
+ + + + 10:32 +
+
+
+
+

Доставлено

+
+
+ + + + 10:32 +
+
+
+
+

Прочитано

+
+
+ + + + 10:32 +
+
+
+
+ + +
+

04. With Attachments

+
+
+
+

Высылаю договор

+
+
+ + + +
+
+ Договор_v2.pdf + 2.4 MB +
+ +
+
+
+
+
+
+
📷 Скриншот
+
+
+
+
+
+ + +
+

05. Typing Indicator

+
+
+
+

Секунду, проверяю информацию...

+
+
+
+
+
+ + + +
+
+
+
+
+ + +
+

06. AI Assistant Chat

+
+
+
+ + + +
+
+ Documatica AI +
+

Привет! Я AI-ассистент Documatica. Могу помочь с поиском документов, ответами на вопросы и анализом данных.

+
+
+
+
+
+

Найди все договоры за 2024 год

+
+
+
+
+ + + +
+
+
+

Нашёл 24 договора за 2024 год:

+
+
+ + + + Договор_ООО_Альфа.pdf +
+
+ + + + Договор_ИП_Бета.pdf +
+
+ +22 ещё... +
+
+
+
+
+
+
+ + +
+

07. Chat Input

+
+
+ + + + +
+
+
+ + +
+

08. Chat Header

+
+
+
+ АП +
+
+
+ Анна Петрова + В сети +
+
+
+ + + +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/checkboxes.css b/skills/documatica-v12-design-system/references/checkboxes.css new file mode 100644 index 00000000..14ad1afa --- /dev/null +++ b/skills/documatica-v12-design-system/references/checkboxes.css @@ -0,0 +1,588 @@ +/** + * Documatica Design System v12.0 + * Checkboxes, Radio & Toggle Components + */ + +/* ========================================================================= + LAYOUT (shared) + ========================================================================= */ + +.container { + max-width: 1200px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(40px, 7vw, 72px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--spacing-10); +} + +.showcase { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.showcase__label { + margin-top: var(--spacing-4); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-300); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + CHECKBOX + ========================================================================= */ + +.checkbox { + display: inline-flex; + align-items: flex-start; + gap: var(--spacing-3); + cursor: pointer; + user-select: none; +} + +.checkbox__input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.checkbox__box { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + flex-shrink: 0; + background-color: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-md); + transition: var(--transition-spring); +} + +.checkbox__icon { + width: 14px; + height: 14px; + opacity: 0; + transform: scale(0.5); + transition: var(--transition-spring); + color: var(--color-white); +} + +/* Checked State */ +.checkbox__input:checked + .checkbox__box { + background-color: var(--color-primary); + border-color: var(--color-primary); +} + +.checkbox__input:checked + .checkbox__box .checkbox__icon { + opacity: 1; + transform: scale(1); +} + +/* Hover State */ +.checkbox:hover .checkbox__box { + border-color: var(--color-primary); +} + +/* Focus State */ +.checkbox__input:focus-visible + .checkbox__box { + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +/* Disabled State */ +.checkbox--disabled { + cursor: not-allowed; +} + +.checkbox--disabled .checkbox__box { + background-color: var(--color-slate-100); + border-color: var(--color-slate-200); +} + +.checkbox--disabled .checkbox__input:checked + .checkbox__box { + background-color: var(--color-slate-300); + border-color: var(--color-slate-300); +} + +.checkbox--disabled .checkbox__label { + color: var(--color-slate-400); +} + +/* Label & Hint */ +.checkbox__label { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + line-height: 1.5; +} + +.checkbox__hint { + display: block; + margin-top: var(--spacing-1); + margin-left: calc(24px + var(--spacing-3)); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); +} + +/* ========================================================================= + CHECKBOX GROUP + ========================================================================= */ + +.checkbox-group { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + padding: var(--spacing-6); + max-width: 400px; +} + +.checkbox-group__title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-4); +} + +.checkbox-group__items { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +/* ========================================================================= + RADIO + ========================================================================= */ + +.radio { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + cursor: pointer; + user-select: none; +} + +.radio__input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.radio__circle { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + flex-shrink: 0; + background-color: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-full); + transition: var(--transition-spring); +} + +.radio__circle::after { + content: ''; + width: 10px; + height: 10px; + background-color: var(--color-white); + border-radius: var(--radius-full); + opacity: 0; + transform: scale(0); + transition: var(--transition-spring); +} + +/* Checked State */ +.radio__input:checked + .radio__circle { + background-color: var(--color-primary); + border-color: var(--color-primary); +} + +.radio__input:checked + .radio__circle::after { + opacity: 1; + transform: scale(1); +} + +/* Hover State */ +.radio:hover .radio__circle { + border-color: var(--color-primary); +} + +/* Focus State */ +.radio__input:focus-visible + .radio__circle { + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +/* Disabled State */ +.radio--disabled { + cursor: not-allowed; +} + +.radio--disabled .radio__circle { + background-color: var(--color-slate-100); + border-color: var(--color-slate-200); +} + +.radio--disabled .radio__label { + color: var(--color-slate-400); +} + +/* Label */ +.radio__label { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +/* ========================================================================= + RADIO GROUP + ========================================================================= */ + +.radio-group { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + padding: var(--spacing-6); + max-width: 400px; +} + +.radio-group__title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-4); +} + +.radio-group__items { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.radio-group__items--inline { + flex-direction: row; + gap: var(--spacing-8); +} + +/* ========================================================================= + TOGGLE + ========================================================================= */ + +.toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + cursor: pointer; + user-select: none; +} + +.toggle__input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.toggle__track { + position: relative; + width: 52px; + height: 28px; + flex-shrink: 0; + background-color: var(--color-slate-200); + border-radius: var(--radius-full); + transition: var(--transition-spring); +} + +.toggle__thumb { + position: absolute; + top: 3px; + left: 3px; + width: 22px; + height: 22px; + background-color: var(--color-white); + border-radius: var(--radius-full); + box-shadow: var(--shadow-sm); + transition: var(--transition-spring); +} + +/* Checked State */ +.toggle__input:checked + .toggle__track { + background-color: var(--color-primary); +} + +.toggle__input:checked + .toggle__track .toggle__thumb { + transform: translateX(24px); +} + +/* Hover State */ +.toggle:hover .toggle__track { + background-color: var(--color-slate-300); +} + +.toggle:hover .toggle__input:checked + .toggle__track { + background-color: var(--color-primary-hover); +} + +/* Focus State */ +.toggle__input:focus-visible + .toggle__track { + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +/* Disabled State */ +.toggle--disabled { + cursor: not-allowed; +} + +.toggle--disabled .toggle__track { + background-color: var(--color-slate-100); +} + +.toggle--disabled .toggle__thumb { + background-color: var(--color-slate-200); +} + +.toggle--disabled .toggle__label { + color: var(--color-slate-400); +} + +/* Smart (AI) Toggle */ +.toggle--smart .toggle__input:checked + .toggle__track { + background-color: var(--color-smart); +} + +.toggle--smart:hover .toggle__input:checked + .toggle__track { + background-color: var(--color-smart-hover); +} + +/* Label */ +.toggle__label { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +/* ========================================================================= + TOGGLE LIST + ========================================================================= */ + +.toggle-list { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; + max-width: 500px; +} + +.toggle-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-5) var(--spacing-6); + border-bottom: 1px solid var(--color-slate-100); +} + +.toggle-item:last-child { + border-bottom: none; +} + +.toggle-item__content { + display: flex; + flex-direction: column; + gap: var(--spacing-1); +} + +.toggle-item__label { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.toggle-item__hint { + font-size: var(--font-size-md); + color: var(--color-slate-400); +} + +/* ========================================================================= + CHIP SELECT + ========================================================================= */ + +.chip-select { + display: inline-flex; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + padding: 4px; + gap: 4px; +} + +.chip { + cursor: pointer; +} + +.chip__input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.chip__label { + display: block; + padding: var(--spacing-3) var(--spacing-5); + font-size: var(--font-size-md); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: transparent; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +/* Checked State */ +.chip__input:checked + .chip__label { + background-color: var(--color-dark); + color: var(--color-white); +} + +/* Hover State */ +.chip:hover .chip__label:not(:checked) { + background-color: var(--color-slate-100); +} + +/* Focus State */ +.chip__input:focus-visible + .chip__label { + box-shadow: 0 0 0 2px var(--color-primary); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .showcase-grid { + grid-template-columns: 1fr; + } + + .radio-group__items--inline { + flex-direction: column; + gap: var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/checkboxes.html b/skills/documatica-v12-design-system/references/checkboxes.html new file mode 100644 index 00000000..80c4743b --- /dev/null +++ b/skills/documatica-v12-design-system/references/checkboxes.html @@ -0,0 +1,336 @@ + + + + + + Checkboxes & Toggles — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Selection Protocol v12.0 +
+

+ Чекбоксы и переключатели +

+
+ + +
+

01. Checkboxes

+
+ + +
+ + Default +
+ + +
+ + System Default Active + Checked +
+ + +
+ + Requires Pro License + Disabled +
+ + +
+ + Всегда активно + Disabled Checked +
+ +
+
+ + +
+

02. Checkbox Group

+
+

Выберите модули

+
+ + + + +
+
+
+ + +
+

03. Radio Buttons

+
+ + +
+ + Default +
+ + +
+ + Checked +
+ + +
+ + Disabled +
+ +
+
+ + +
+

04. Radio Group

+
+

Приоритет узла

+
+ + +
+
+
+ + +
+

05. Toggle Switches

+
+ + +
+ + Default Off +
+ + +
+ + Active +
+ + +
+ + Disabled +
+ + +
+ + AI Smart Toggle +
+ +
+
+ + +
+

06. Settings Toggle List

+
+ +
+
+ Автосохранение + Сохранять изменения каждые 30 секунд +
+ +
+ +
+
+ Email уведомления + Получать сводку по документам +
+ +
+ +
+
+ Двухфакторная аутентификация + Дополнительный уровень защиты +
+ +
+ +
+
+ + +
+

07. Chip Select (Tabs Style)

+
+ + + +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/checkout.css b/skills/documatica-v12-design-system/references/checkout.css new file mode 100644 index 00000000..788bfed4 --- /dev/null +++ b/skills/documatica-v12-design-system/references/checkout.css @@ -0,0 +1,1107 @@ +/** + * UI Kit v12.0 — Checkout + * Order forms, steps, payment + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + STEPS + ========================================================================= */ + +.steps-card { + background: var(--color-white); + border-radius: 24px; + padding: 40px; +} + +.steps { + display: flex; + align-items: center; + justify-content: center; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.step__indicator { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: var(--color-slate-100); + border-radius: 50%; + font-size: 16px; + font-weight: 700; + color: var(--color-slate-400); + transition: all 0.3s ease; +} + +.step--active .step__indicator { + background: var(--color-primary); + color: var(--color-white); + box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); +} + +.step--completed .step__indicator { + background: var(--color-success); + color: var(--color-white); +} + +.step__content { + text-align: center; +} + +.step__number { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; + margin-bottom: 4px; +} + +.step__label { + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; +} + +.step--active .step__label, +.step--completed .step__label { + color: var(--color-dark); +} + +.step__line { + width: 80px; + height: 2px; + background: var(--color-slate-200); + margin: 0 24px; + margin-bottom: 40px; +} + +.step__line--completed { + background: var(--color-success); +} + +/* ========================================================================= + CHECKOUT LAYOUT + ========================================================================= */ + +.checkout-wrapper { + display: grid; + grid-template-columns: 1fr 400px; + gap: 32px; + align-items: start; +} + +.checkout-main { + display: flex; + flex-direction: column; + gap: 24px; +} + +/* ========================================================================= + FORM SECTIONS + ========================================================================= */ + +.form-section { + background: var(--color-white); + border-radius: 24px; + padding: 32px; +} + +.form-section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 28px; +} + +.form-section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.form-section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-dark); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + FORM FIELDS + ========================================================================= */ + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-bottom: 16px; +} + +.form-row--3 { + grid-template-columns: repeat(3, 1fr); +} + +.form-field { + margin-bottom: 16px; +} + +.form-row .form-field { + margin-bottom: 0; +} + +.form-label { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin-bottom: 10px; +} + +.form-input { + width: 100%; + padding: 16px 18px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 14px; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); + transition: all 0.2s ease; +} + +.form-input:focus { + outline: none; + background: var(--color-white); + border-color: var(--color-primary); +} + +.form-input::placeholder { + color: var(--color-slate-400); +} + +.form-textarea { + width: 100%; + padding: 16px 18px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 14px; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); + resize: vertical; + min-height: 100px; + transition: all 0.2s ease; +} + +.form-textarea:focus { + outline: none; + background: var(--color-white); + border-color: var(--color-primary); +} + +.form-select-wrapper { + position: relative; +} + +.form-select { + width: 100%; + padding: 16px 18px; + padding-right: 48px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 14px; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); + appearance: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.form-select:focus { + outline: none; + background: var(--color-white); + border-color: var(--color-primary); +} + +.form-select__arrow { + position: absolute; + right: 18px; + top: 50%; + transform: translateY(-50%); + color: var(--color-slate-400); + pointer-events: none; +} + +.form-input-icon { + position: relative; +} + +.form-input-icon .form-input { + padding-right: 80px; +} + +.card-brands { + position: absolute; + right: 18px; + top: 50%; + transform: translateY(-50%); +} + +.card-brand { + padding: 4px 10px; + background: #1a1f71; + border-radius: 6px; + font-size: 11px; + font-weight: 700; + color: var(--color-white); + letter-spacing: 0.1em; +} + +/* ========================================================================= + CHECKBOX + ========================================================================= */ + +.checkbox { + display: flex; + align-items: flex-start; + gap: 12px; + cursor: pointer; + margin-top: 20px; +} + +.checkbox input { + display: none; +} + +.checkbox__mark { + width: 22px; + height: 22px; + background: var(--color-slate-100); + border: 2px solid var(--color-slate-300); + border-radius: 6px; + flex-shrink: 0; + position: relative; + transition: all 0.2s ease; +} + +.checkbox input:checked + .checkbox__mark { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.checkbox input:checked + .checkbox__mark::after { + content: ''; + position: absolute; + top: 3px; + left: 7px; + width: 5px; + height: 10px; + border: solid var(--color-white); + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.checkbox__text { + font-size: 14px; + color: var(--color-slate-600); + line-height: 1.5; +} + +.checkbox__text a { + color: var(--color-primary); + text-decoration: none; +} + +.checkbox--sm .checkbox__mark { + width: 18px; + height: 18px; +} + +.checkbox--sm .checkbox__text { + font-size: 13px; +} + +/* ========================================================================= + SHIPPING CARDS + ========================================================================= */ + +.shipping-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; +} + +.shipping-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 24px 16px; + background: var(--color-slate-50); + border: 2px solid var(--color-slate-100); + border-radius: 18px; + cursor: pointer; + text-align: center; + transition: all 0.2s ease; +} + +.shipping-card:hover { + border-color: var(--color-slate-300); +} + +.shipping-card--selected, +.shipping-card:has(input:checked) { + background: rgba(59, 130, 246, 0.05); + border-color: var(--color-primary); +} + +.shipping-card input { + display: none; +} + +.shipping-card__radio { + display: none; +} + +.shipping-card__icon { + display: flex; + align-items: center; + justify-content: center; + width: 52px; + height: 52px; + background: var(--color-white); + border-radius: 14px; + color: var(--color-slate-500); +} + +.shipping-card:has(input:checked) .shipping-card__icon { + background: var(--color-primary); + color: var(--color-white); +} + +.shipping-card__title { + display: block; + font-size: 15px; + font-weight: 700; + color: var(--color-dark); +} + +.shipping-card__desc { + font-size: 13px; + color: var(--color-slate-500); +} + +/* ========================================================================= + PAYMENT METHODS + ========================================================================= */ + +.payment-methods { + display: flex; + gap: 12px; + margin-bottom: 24px; +} + +.payment-method { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 20px; + background: var(--color-slate-50); + border: 2px solid var(--color-slate-100); + border-radius: 14px; + cursor: pointer; + transition: all 0.2s ease; +} + +.payment-method:hover { + border-color: var(--color-slate-300); +} + +.payment-method--selected, +.payment-method:has(input:checked) { + background: rgba(59, 130, 246, 0.05); + border-color: var(--color-primary); +} + +.payment-method input { + display: none; +} + +.payment-method__radio { + width: 20px; + height: 20px; + border: 2px solid var(--color-slate-300); + border-radius: 50%; + position: relative; +} + +.payment-method:has(input:checked) .payment-method__radio { + border-color: var(--color-primary); +} + +.payment-method:has(input:checked) .payment-method__radio::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + background: var(--color-primary); + border-radius: 50%; +} + +.payment-method__icon { + color: var(--color-slate-500); +} + +.payment-method:has(input:checked) .payment-method__icon { + color: var(--color-primary); +} + +.payment-method__label { + font-size: 14px; + font-weight: 600; + color: var(--color-dark); +} + +.card-form { + padding: 24px; + background: var(--color-slate-50); + border-radius: 18px; +} + +/* ========================================================================= + ORDER SUMMARY + ========================================================================= */ + +.order-summary { + background: var(--color-white); + border-radius: 24px; + padding: 28px; + position: sticky; + top: 24px; +} + +.order-summary__title { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.15em; + margin: 0 0 24px 0; +} + +.order-items { + display: flex; + flex-direction: column; + gap: 16px; + padding-bottom: 20px; + border-bottom: 1px solid var(--color-slate-100); + margin-bottom: 20px; +} + +.order-item { + display: flex; + align-items: center; + gap: 14px; +} + +.order-item__image { + position: relative; + width: 56px; + height: 56px; + border-radius: 12px; + overflow: hidden; + background: var(--color-slate-100); + flex-shrink: 0; +} + +.order-item__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.order-item__qty { + position: absolute; + top: -6px; + right: -6px; + display: flex; + align-items: center; + justify-content: center; + min-width: 20px; + height: 20px; + padding: 0 6px; + background: var(--color-dark); + border-radius: 10px; + font-size: 11px; + font-weight: 700; + color: var(--color-white); +} + +.order-item__info { + flex: 1; + min-width: 0; +} + +.order-item__name { + display: block; + font-size: 14px; + font-weight: 600; + color: var(--color-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.order-item__meta { + font-size: 12px; + color: var(--color-slate-400); +} + +.order-item__price { + font-size: 15px; + font-weight: 700; + color: var(--color-dark); +} + +.order-summary__rows { + display: flex; + flex-direction: column; + gap: 12px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-100); +} + +.order-summary__row { + display: flex; + justify-content: space-between; + font-size: 14px; + color: var(--color-slate-600); +} + +.order-summary__row span:last-child { + font-weight: 600; + color: var(--color-dark); +} + +.order-summary__row--discount span:last-child { + color: var(--color-success); +} + +.order-summary__total { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + font-size: 13px; + font-weight: 700; + color: var(--color-slate-500); + letter-spacing: 0.1em; +} + +.order-summary__total-value { + font-size: 26px; + font-weight: 900; + color: var(--color-dark); +} + +.order-summary__legal { + margin-top: 16px; +} + +.order-summary__legal .checkbox { + margin-top: 0; +} + +.order-summary__secure { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--color-slate-100); + font-size: 13px; + color: var(--color-slate-400); +} + +.order-summary__secure svg { + color: var(--color-success); +} + +/* ========================================================================= + SUCCESS CARD + ========================================================================= */ + +.success-card { + text-align: center; + padding: 64px 48px; + background: var(--color-white); + border-radius: 32px; +} + +.success-card__icon { + display: flex; + align-items: center; + justify-content: center; + width: 96px; + height: 96px; + margin: 0 auto 32px; + background: rgba(16, 185, 129, 0.1); + border-radius: 50%; + color: var(--color-success); +} + +.success-card__title { + font-size: 42px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.01em; +} + +.success-card__title span { + color: var(--color-primary); +} + +.success-card__text { + font-size: 18px; + color: var(--color-slate-600); + margin: 0 0 8px 0; +} + +.success-card__text strong { + color: var(--color-dark); + font-family: 'SF Mono', monospace; +} + +.success-card__desc { + font-size: 15px; + color: var(--color-slate-500); + max-width: 480px; + margin: 0 auto 32px; +} + +.success-card__delivery { + display: inline-flex; + align-items: center; + gap: 16px; + padding: 20px 28px; + background: var(--color-slate-50); + border-radius: 18px; + margin-bottom: 32px; +} + +.success-card__delivery-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: var(--color-primary); + border-radius: 14px; + color: var(--color-white); +} + +.success-card__delivery-info { + text-align: left; +} + +.success-card__delivery-label { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin-bottom: 4px; +} + +.success-card__delivery-date { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); +} + +.success-card__actions { + display: flex; + gap: 16px; + justify-content: center; +} + +/* ========================================================================= + TRACKING + ========================================================================= */ + +.tracking-card { + background: var(--color-white); + border-radius: 24px; + padding: 32px; +} + +.tracking-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 32px; +} + +.tracking-header__label { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; +} + +.tracking-header__number { + font-size: 24px; + font-weight: 900; + color: var(--color-dark); + font-family: 'SF Mono', monospace; +} + +.tracking-status { + padding: 10px 18px; + border-radius: 12px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; +} + +.tracking-status--pending { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.tracking-status--transit { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.tracking-status--delivered { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.tracking-timeline { + position: relative; + padding-left: 32px; +} + +.tracking-step { + position: relative; + padding-bottom: 32px; + padding-left: 20px; +} + +.tracking-step:last-child { + padding-bottom: 0; +} + +.tracking-step::before { + content: ''; + position: absolute; + left: 0; + top: 8px; + bottom: -8px; + width: 2px; + background: var(--color-slate-200); +} + +.tracking-step:last-child::before { + display: none; +} + +.tracking-step--completed::before { + background: var(--color-success); +} + +.tracking-step__dot { + position: absolute; + left: -5px; + top: 4px; + width: 12px; + height: 12px; + background: var(--color-slate-300); + border-radius: 50%; +} + +.tracking-step--completed .tracking-step__dot { + background: var(--color-success); +} + +.tracking-step--active .tracking-step__dot { + background: var(--color-primary); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); +} + +.tracking-step__title { + display: block; + font-size: 15px; + font-weight: 600; + color: var(--color-dark); + margin-bottom: 4px; +} + +.tracking-step__date { + font-size: 13px; + color: var(--color-slate-400); +} + +.tracking-step--active .tracking-step__title { + color: var(--color-primary); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .checkout-wrapper { + grid-template-columns: 1fr; + } + + .order-summary { + position: static; + } + + .steps { + flex-wrap: wrap; + gap: 16px; + } + + .step__line { + display: none; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .form-row, + .form-row--3 { + grid-template-columns: 1fr; + } + + .shipping-cards { + grid-template-columns: 1fr; + } + + .payment-methods { + flex-direction: column; + } + + .success-card__actions { + flex-direction: column; + } +} diff --git a/skills/documatica-v12-design-system/references/checkout.html b/skills/documatica-v12-design-system/references/checkout.html new file mode 100644 index 00000000..fb9df680 --- /dev/null +++ b/skills/documatica-v12-design-system/references/checkout.html @@ -0,0 +1,498 @@ + + + + + + Checkout — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● ECOMMERCE +

CHECK
OUT

+

Оформление заказа: шаги, формы, оплата и подтверждение.

+
+ + +
+
+ 01 +

STEPS PROGRESS

+
+ +
+
+
+
+ + + +
+
+ 01 + КОРЗИНА +
+
+
+
+
2
+
+ 02 + ДОСТАВКА +
+
+
+
+
3
+
+ 03 + ОПЛАТА +
+
+
+
+
4
+
+ 04 + ГОТОВО +
+
+
+
+
+ + +
+
+ 02 +

CHECKOUT FORM

+
+ +
+
+ +
+
+ 01 +

КОНТАКТНЫЕ ДАННЫЕ

+
+ +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ 02 +

АДРЕС ДОСТАВКИ

+
+ +
+ +
+ + + + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ 03 +

СПОСОБ ДОСТАВКИ

+
+ +
+ + + + + +
+
+ + +
+
+ 04 +

СПОСОБ ОПЛАТЫ

+
+ +
+ + + + + +
+ + +
+
+ +
+ +
+ VISA +
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + + +
+
+ + +
+
+ 03 +

SUCCESS STATE

+
+ +
+
+ + + +
+

ЗАКАЗ ОФОРМЛЕН!

+

Номер заказа: #2026-0125-7842

+

Мы отправили подтверждение на alex@example.com. Вы также можете отслеживать статус заказа в личном кабинете.

+ +
+
+ + + + +
+
+ ОЖИДАЕМАЯ ДАТА ДОСТАВКИ + 28 - 30 января 2026 +
+
+ +
+ Отслеживать заказ + Продолжить покупки +
+
+
+ + +
+
+ 04 +

ORDER TRACKING

+
+ +
+
+
+ ЗАКАЗ + #2026-0125-7842 +
+ ● В ПУТИ +
+ +
+
+
+
+ Заказ оформлен + 25 янв, 14:32 +
+
+
+
+
+ Оплата подтверждена + 25 янв, 14:33 +
+
+
+
+
+ Отправлен со склада + 26 янв, 09:15 +
+
+
+
+
+ В пути к вам + Сегодня +
+
+
+
+
+ Доставлен + Ожидается 28 янв +
+
+
+
+
+ + +
+
+ 05 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Нумерованные секции формы -->
+<div class="form-section">
+  <div class="form-section__header">
+    <span class="form-section__number">01</span>
+    <h3 class="form-section__title">ЗАГОЛОВОК</h3>
+  </div>
+  <!-- Поля формы -->
+</div>
+
+<!-- Steps -->
+<div class="step step--completed">...</div>
+<div class="step step--active">...</div>
+<div class="step">...</div>
+
+<!-- Tracking statuses -->
+.tracking-status--pending   /* Ожидание */
+.tracking-status--transit   /* В пути */
+.tracking-status--delivered /* Доставлен */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/colors.css b/skills/documatica-v12-design-system/references/colors.css new file mode 100644 index 00000000..380e62ee --- /dev/null +++ b/skills/documatica-v12-design-system/references/colors.css @@ -0,0 +1,451 @@ +/** + * Documatica Design System v12.0 + * Colors & Palette Showcase + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + BRAND COLORS + ========================================================================= */ + +.colors-grid { + display: grid; + gap: var(--spacing-6); +} + +.colors-grid--brand { + grid-template-columns: repeat(3, 1fr); +} + +.colors-grid--semantic { + grid-template-columns: repeat(4, 1fr); +} + +.color-card { + background: var(--color-white); + border-radius: var(--radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-md); + transition: var(--transition-spring); +} + +.color-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.color-card--large .color-swatch { + height: 160px; +} + +.color-swatch { + height: 100px; +} + +.color-info { + padding: var(--spacing-5); +} + +.color-name { + display: block; + font-size: var(--font-size-lg); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin-bottom: var(--spacing-1); +} + +.color-role { + display: block; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + margin-bottom: var(--spacing-4); +} + +.color-values { + display: flex; + flex-direction: column; + gap: var(--spacing-1); +} + +.color-values code, +.color-info code { + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xs); + color: var(--color-slate-500); +} + +/* ========================================================================= + COLOR SCALES + ========================================================================= */ + +.color-scale { + display: flex; + border-radius: var(--radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +.scale-item { + flex: 1; + padding: var(--spacing-6) var(--spacing-3); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-2); + min-height: 120px; + position: relative; +} + +.scale-name { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.scale-item code { + font-family: 'SF Mono', monospace; + font-size: 10px; + color: var(--color-slate-700); +} + +.scale-item--light .scale-name, +.scale-item--light code { + color: var(--color-white); +} + +.scale-item--primary { + position: relative; +} + +.scale-badge { + position: absolute; + bottom: var(--spacing-3); + left: 50%; + transform: translateX(-50%); + padding: 2px 8px; + font-size: 8px; + font-weight: var(--font-weight-black); + letter-spacing: 0.1em; + background: var(--color-white); + color: var(--color-dark); + border-radius: var(--radius-full); +} + +.scale-item--light .scale-badge { + background: rgba(255, 255, 255, 0.2); + color: var(--color-white); +} + +/* ========================================================================= + GRADIENTS + ========================================================================= */ + +.gradients-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); +} + +.gradient-card { + background: var(--color-white); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-md); +} + +.gradient-swatch { + height: 100px; +} + +.gradient-info { + padding: var(--spacing-4); +} + +.gradient-name { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin-bottom: var(--spacing-2); +} + +.gradient-info code { + font-family: 'SF Mono', monospace; + font-size: 10px; + color: var(--color-slate-400); + word-break: break-all; +} + +/* ========================================================================= + PATTERNS + ========================================================================= */ + +.patterns-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); +} + +.pattern-card { + background: var(--color-white); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-md); +} + +.pattern-swatch { + height: 120px; +} + +.pattern-swatch--dots { + background-color: #f8fafc; + background-image: radial-gradient(#3b82f6 1px, transparent 1px); + background-size: 24px 24px; +} + +.pattern-swatch--dots-dark { + background-color: #0f172a; + background-image: radial-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px); + background-size: 24px 24px; +} + +.pattern-swatch--lines { + background-color: #f8fafc; + background-image: + linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px); + background-size: 24px 24px; +} + +.pattern-info { + padding: var(--spacing-4); +} + +.pattern-name { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin-bottom: var(--spacing-2); +} + +.pattern-info code { + font-family: 'SF Mono', monospace; + font-size: 10px; + color: var(--color-slate-400); +} + +/* ========================================================================= + SHADOWS + ========================================================================= */ + +.shadows-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-6); +} + +.shadow-card { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-4); +} + +.shadow-box { + width: 100px; + height: 100px; + background: var(--color-white); + border-radius: var(--radius-xl); +} + +.shadow-box--sm { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.shadow-box--base { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); +} + +.shadow-box--md { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.shadow-box--lg { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.shadow-box--xl { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} + +.shadow-box--2xl { + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +} + +.shadow-info { + text-align: center; +} + +.shadow-name { + display: block; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin-bottom: var(--spacing-1); +} + +.shadow-info code { + font-family: 'SF Mono', monospace; + font-size: 10px; + color: var(--color-slate-400); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .colors-grid--brand, + .colors-grid--semantic { + grid-template-columns: repeat(2, 1fr); + } + + .color-scale { + flex-wrap: wrap; + } + + .scale-item { + flex: 0 0 20%; + } + + .gradients-grid, + .patterns-grid, + .shadows-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .colors-grid--brand, + .colors-grid--semantic { + grid-template-columns: 1fr; + } + + .scale-item { + flex: 0 0 50%; + } + + .gradients-grid, + .patterns-grid, + .shadows-grid { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/colors.html b/skills/documatica-v12-design-system/references/colors.html new file mode 100644 index 00000000..52394077 --- /dev/null +++ b/skills/documatica-v12-design-system/references/colors.html @@ -0,0 +1,514 @@ + + + + + + Colors — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Color Protocol v12.0 +
+

+ Colors +

+
+ + +
+

01. Brand Colors

+
+ +
+
+
+ Core Blue + Primary actions, links, focus states +
+ #3b82f6 + rgb(59, 130, 246) + hsl(217, 91%, 60%) +
+
+
+ +
+
+
+ Smart Gold + AI features, highlights, accents +
+ #fbbf24 + rgb(251, 191, 36) + hsl(45, 96%, 56%) +
+
+
+ +
+
+
+ Dark Slate + Primary text, dark backgrounds +
+ #0f172a + rgb(15, 23, 42) + hsl(222, 47%, 11%) +
+
+
+ +
+
+ + +
+

02. Semantic Colors

+
+ +
+
+
+ Success + #10b981 +
+
+ +
+
+
+ Warning + #f59e0b +
+
+ +
+
+
+ Danger + #dc2626 +
+
+ +
+
+
+ Info + #6366f1 +
+
+ +
+
+ + +
+

03. Blue Scale

+
+
+ 50 + #eff6ff +
+
+ 100 + #dbeafe +
+
+ 200 + #bfdbfe +
+
+ 300 + #93c5fd +
+
+ 400 + #60a5fa +
+
+ 500 + #3b82f6 + PRIMARY +
+
+ 600 + #2563eb +
+
+ 700 + #1d4ed8 +
+
+ 800 + #1e40af +
+
+ 900 + #1e3a8a +
+
+
+ + +
+

04. Slate (Neutral) Scale

+
+
+ 50 + #f8fafc +
+
+ 100 + #f1f5f9 +
+
+ 200 + #e2e8f0 +
+
+ 300 + #cbd5e1 +
+
+ 400 + #94a3b8 +
+
+ 500 + #64748b +
+
+ 600 + #475569 +
+
+ 700 + #334155 +
+
+ 800 + #1e293b +
+
+ 900 + #0f172a + DARK +
+
+
+ + +
+

05. Gold (Amber) Scale

+
+
+ 50 + #fffbeb +
+
+ 100 + #fef3c7 +
+
+ 200 + #fde68a +
+
+ 300 + #fcd34d +
+
+ 400 + #fbbf24 + SMART +
+
+ 500 + #f59e0b +
+
+ 600 + #d97706 +
+
+ 700 + #b45309 +
+
+ 800 + #92400e +
+
+ 900 + #78350f +
+
+
+ + +
+

06. Green (Emerald) Scale

+
+
+ 50 + #ecfdf5 +
+
+ 100 + #d1fae5 +
+
+ 200 + #a7f3d0 +
+
+ 300 + #6ee7b7 +
+
+ 400 + #34d399 +
+
+ 500 + #10b981 + SUCCESS +
+
+ 600 + #059669 +
+
+ 700 + #047857 +
+
+ 800 + #065f46 +
+
+ 900 + #064e3b +
+
+
+ + +
+

07. Red Scale

+
+
+ 50 + #fef2f2 +
+
+ 100 + #fee2e2 +
+
+ 200 + #fecaca +
+
+ 300 + #fca5a5 +
+
+ 400 + #f87171 +
+
+ 500 + #ef4444 +
+
+ 600 + #dc2626 + DANGER +
+
+ 700 + #b91c1c +
+
+ 800 + #991b1b +
+
+ 900 + #7f1d1d +
+
+
+ + +
+

08. Gradients

+
+ +
+
+
+ Primary Gradient + linear-gradient(135deg, #3b82f6, #1d4ed8) +
+
+ +
+
+
+ Smart Gradient + linear-gradient(135deg, #fbbf24, #f59e0b) +
+
+ +
+
+
+ Brand Gradient + linear-gradient(135deg, #3b82f6, #fbbf24) +
+
+ +
+
+
+ Dark Gradient + linear-gradient(135deg, #0f172a, #334155) +
+
+ +
+
+
+ Success Gradient + linear-gradient(135deg, #10b981, #059669) +
+
+ +
+
+
+ Violet Gradient + linear-gradient(135deg, #6366f1, #8b5cf6) +
+
+ +
+
+ + +
+

09. Background Patterns

+
+ +
+
+
+ Dot Grid (Light) + radial-gradient(#3b82f6 1px, transparent 1px) +
+
+ +
+
+
+ Dot Grid (Dark) + radial-gradient(#3b82f6 1px, transparent 1px) +
+
+ +
+
+
+ Grid Lines + repeating-linear-gradient +
+
+ +
+
+ + +
+

10. Shadows

+
+ +
+
+
+ Shadow SM + 0 1px 2px rgba(0,0,0,0.05) +
+
+ +
+
+
+ Shadow Base + 0 1px 3px rgba(0,0,0,0.1) +
+
+ +
+
+
+ Shadow MD + 0 4px 6px rgba(0,0,0,0.1) +
+
+ +
+
+
+ Shadow LG + 0 10px 15px rgba(0,0,0,0.1) +
+
+ +
+
+
+ Shadow XL + 0 20px 25px rgba(0,0,0,0.1) +
+
+ +
+
+
+ Shadow 2XL + 0 25px 50px rgba(0,0,0,0.25) +
+
+ +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/comments.css b/skills/documatica-v12-design-system/references/comments.css new file mode 100644 index 00000000..c150340d --- /dev/null +++ b/skills/documatica-v12-design-system/references/comments.css @@ -0,0 +1,541 @@ +/** + * Documatica Design System v12.0 + * Comments Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + COMMENT BASE + ========================================================================= */ + +.comment { + display: flex; + gap: var(--spacing-4); + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.comment__avatar { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.comment__avatar--sm { + width: 32px; + height: 32px; + font-size: var(--font-size-xs); +} + +.comment__avatar--resolved { + background: var(--color-success); +} + +.comment__avatar--resolved svg { + width: 20px; + height: 20px; +} + +.comment__content { + flex: 1; + min-width: 0; +} + +.comment__header { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-bottom: var(--spacing-2); + flex-wrap: wrap; +} + +.comment__author { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.comment__badge { + padding: 2px var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-full); +} + +.comment__badge--resolved { + color: var(--color-success); + background: rgba(16, 185, 129, 0.1); +} + +.comment__time { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.comment__text { + margin: 0; + font-size: var(--font-size-base); + color: var(--color-slate-700); + line-height: var(--line-height-relaxed); +} + +/* ========================================================================= + COMMENT ACTIONS + ========================================================================= */ + +.comment__actions { + display: flex; + gap: var(--spacing-3); + margin-top: var(--spacing-3); +} + +.comment__action { + display: flex; + align-items: center; + gap: var(--spacing-1); + padding: var(--spacing-1) var(--spacing-2); + font-family: var(--font-family); + font-size: var(--font-size-sm); + color: var(--color-slate-400); + background: none; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: var(--transition-base); +} + +.comment__action:hover { + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); +} + +.comment__action--active { + color: var(--color-primary); +} + +.comment__action svg { + width: 18px; + height: 18px; +} + +/* ========================================================================= + THREADED COMMENTS + ========================================================================= */ + +.comments-thread { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.comment--reply { + margin-left: var(--spacing-12); + border-left: 2px solid var(--color-slate-200); + border-radius: 0 var(--radius-xl) var(--radius-xl) 0; +} + +/* ========================================================================= + COMMENT INPUT + ========================================================================= */ + +.comment-input { + display: flex; + gap: var(--spacing-4); + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.comment-input__field { + flex: 1; +} + +.comment-input__field textarea { + width: 100%; + min-height: 80px; + padding: var(--spacing-3); + font-family: var(--font-family); + font-size: var(--font-size-base); + color: var(--color-dark); + background: var(--color-slate-50); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + resize: vertical; + outline: none; + transition: var(--transition-base); +} + +.comment-input__field textarea::placeholder { + color: var(--color-slate-400); +} + +.comment-input__field textarea:focus { + border-color: var(--color-primary); + background: var(--color-white); +} + +.comment-input__actions { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-3); +} + +.comment-input__tools { + display: flex; + gap: var(--spacing-1); +} + +.input-tool { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.input-tool:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.input-tool svg { + width: 20px; + height: 20px; +} + +.comment-input__submit { + padding: var(--spacing-2) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.comment-input__submit:hover { + background: #2563eb; +} + +/* ========================================================================= + RESOLVED COMMENT + ========================================================================= */ + +.comment--resolved { + background: rgba(16, 185, 129, 0.03); + border-color: rgba(16, 185, 129, 0.2); +} + +.comment--resolved .comment__text { + text-decoration: line-through; + color: var(--color-slate-400); +} + +.comment__resolution { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-top: var(--spacing-3); + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-success); + background: rgba(16, 185, 129, 0.1); + border-radius: var(--radius-lg); +} + +.comment__resolution svg { + width: 18px; + height: 18px; +} + +/* ========================================================================= + ACTIVITY FEED + ========================================================================= */ + +.activity-feed { + display: flex; + flex-direction: column; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.activity-item { + display: flex; + align-items: flex-start; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.activity-item:last-child { + border-bottom: none; +} + +.activity-icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.activity-icon svg { + width: 18px; + height: 18px; +} + +.activity-icon--comment { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.activity-icon--edit { + background: rgba(251, 191, 36, 0.1); + color: var(--color-smart); +} + +.activity-icon--resolve { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.activity-content { + flex: 1; +} + +.activity-content p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-600); +} + +.activity-content strong { + color: var(--color-dark); +} + +.activity-time { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +/* ========================================================================= + MENTIONS + ========================================================================= */ + +.mention { + font-weight: var(--font-weight-medium); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + padding: 0 var(--spacing-1); + border-radius: var(--radius-sm); +} + +/* ========================================================================= + INLINE COMMENT + ========================================================================= */ + +.inline-comment-demo { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.document-text { + padding: var(--spacing-6); + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + color: var(--color-slate-700); +} + +.highlighted-text { + position: relative; + background: rgba(251, 191, 36, 0.2); + padding: 2px 4px; + border-radius: var(--radius-sm); +} + +.comment-marker { + position: absolute; + top: -8px; + right: -8px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-smart); + border-radius: var(--radius-full); +} + +.inline-comment-popup { + padding: var(--spacing-4); + background: var(--color-slate-50); + border-top: 1px solid var(--color-slate-200); +} + +.comment--inline { + padding: var(--spacing-3); + background: var(--color-white); + margin-bottom: var(--spacing-3); +} + +.inline-comment-reply input { + width: 100%; + padding: var(--spacing-3); + font-family: var(--font-family); + font-size: var(--font-size-sm); + color: var(--color-dark); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + outline: none; + transition: var(--transition-base); +} + +.inline-comment-reply input::placeholder { + color: var(--color-slate-400); +} + +.inline-comment-reply input:focus { + border-color: var(--color-primary); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .comment--reply { + margin-left: var(--spacing-6); + } +} diff --git a/skills/documatica-v12-design-system/references/comments.html b/skills/documatica-v12-design-system/references/comments.html new file mode 100644 index 00000000..7102b83b --- /dev/null +++ b/skills/documatica-v12-design-system/references/comments.html @@ -0,0 +1,279 @@ + + + + + + Comments — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Comments Protocol v12.0 +
+

+ Comments +

+
+ + +
+

01. Basic Comment

+
+
АП
+
+
+ Анна Петрова + 2 часа назад +
+

Отличная работа! Документ готов к подписанию.

+
+
+
+ + +
+

02. With Actions

+
+
МС
+
+
+ Михаил Сидоров + Модератор + 5 мин назад +
+

Пожалуйста, проверьте пункт 3.2 — там есть опечатка в названии компании.

+
+ + + +
+
+
+
+ + +
+

03. Threaded Comments

+
+
+
ИК
+
+
+ Игорь Козлов + 1 день назад +
+

Нужно добавить раздел про условия оплаты.

+
+ + +
+
+
+
+
АП
+
+
+ Анна Петрова + 1 день назад +
+

Добавила в раздел 4. Посмотрите, пожалуйста.

+
+
+
+
ИК
+
+
+ Игорь Козлов + 23 часа назад +
+

Отлично, спасибо! 👍

+
+
+
+
+ + +
+

04. Comment Input

+
+
ВС
+
+ +
+
+ + + +
+ +
+
+
+
+ + +
+

05. Resolved Comment

+
+
+ + + +
+
+
+ Елена Волкова + Решено + 3 дня назад +
+

Исправить дату подписания на 15 января 2025.

+
+ + + + Исправлено Анной Петровой +
+
+
+
+ + +
+

06. Activity Feed Style

+
+
+
+ + + +
+
+

Анна Петрова добавила комментарий

+ 10 мин назад +
+
+
+
+ + + +
+
+

Михаил Сидоров отредактировал документ

+ 1 час назад +
+
+
+
+ + + +
+
+

Игорь Козлов пометил комментарий как решённый

+ 2 часа назад +
+
+
+
+ + +
+

07. With Mentions

+
+
ДВ
+
+
+ Дмитрий Воронов + 30 мин назад +
+

+ @Анна Петрова, можешь проверить раздел 2? + @Игорь Козлов уже одобрил. +

+
+
+
+ + +
+

08. Inline Document Comment

+
+
+

Настоящий Договор вступает в силу с момента его подписания обеими Сторонами и действует до 31 декабря 2025 года2.

+
+
+
+
АП
+
+
+ Анна Петрова +
+

Нужно уточнить дату с юристом

+
+
+
+ +
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/compare.css b/skills/documatica-v12-design-system/references/compare.css new file mode 100644 index 00000000..4fdc4501 --- /dev/null +++ b/skills/documatica-v12-design-system/references/compare.css @@ -0,0 +1,712 @@ +/** + * UI Kit v12.0 — Compare + * Product comparison tables + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--sm { + padding: 10px 18px; + font-size: 12px; +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + COMPARE TABLE + ========================================================================= */ + +.compare-wrapper { + overflow-x: auto; + margin: 0 -24px; + padding: 0 24px; +} + +.compare-table { + min-width: 900px; + background: var(--color-white); + border-radius: 24px; + overflow: hidden; +} + +.compare-row { + display: grid; + grid-template-columns: 180px repeat(4, 1fr); +} + +.compare-row--header { + background: var(--color-slate-50); + border-bottom: 1px solid var(--color-slate-100); +} + +.compare-cell { + padding: 16px 20px; + font-size: 14px; + color: var(--color-dark); + border-bottom: 1px solid var(--color-slate-100); + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.compare-row:last-child .compare-cell { + border-bottom: none; +} + +.compare-cell--label { + background: var(--color-slate-50); + font-weight: 600; + color: var(--color-slate-500); + justify-content: flex-start; + text-align: left; +} + +.compare-cell--product { + padding: 24px; + position: relative; +} + +.compare-cell--best { + background: rgba(16, 185, 129, 0.05); + color: var(--color-success); + font-weight: 700; +} + +.compare-cell--add { + background: transparent; + border: none; +} + +.compare-remove { + position: absolute; + top: 12px; + right: 12px; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 50%; + font-size: 18px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.compare-remove:hover { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.compare-product { + text-align: center; +} + +.compare-product__image { + width: 120px; + height: 120px; + margin: 0 auto 16px; + border-radius: 20px; + overflow: hidden; + background: var(--color-white); +} + +.compare-product__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.compare-product__title { + font-size: 15px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; + line-height: 1.3; +} + +.compare-product__price { + font-size: 18px; + font-weight: 900; + color: var(--color-dark); + margin-bottom: 16px; +} + +.compare-add { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + width: 100%; + height: 100%; + min-height: 200px; + justify-content: center; + background: transparent; + border: 2px dashed var(--color-slate-200); + border-radius: 20px; + color: var(--color-slate-400); + font-family: inherit; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.compare-add:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.05); +} + +.compare-group { + grid-column: 1 / -1; + padding: 16px 20px; + background: var(--color-dark); +} + +.compare-group__title { + font-size: 11px; + font-weight: 700; + color: var(--color-white); + letter-spacing: 0.15em; +} + +/* Check marks */ +.check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + font-size: 14px; + font-weight: 700; +} + +.check--yes { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.check--no { + background: var(--color-slate-100); + color: var(--color-slate-400); +} + +/* ========================================================================= + COMPARE CARDS + ========================================================================= */ + +.compare-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.compare-card { + position: relative; + background: var(--color-white); + border-radius: 24px; + padding: 32px; + text-align: center; + border: 2px solid transparent; +} + +.compare-card--winner { + border-color: var(--color-success); + box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15); +} + +.compare-card__badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + padding: 8px 16px; + background: var(--color-success); + border-radius: 10px; + font-size: 11px; + font-weight: 700; + color: var(--color-white); + letter-spacing: 0.1em; +} + +.compare-card__image { + width: 140px; + height: 140px; + margin: 16px auto; + border-radius: 24px; + overflow: hidden; + background: var(--color-slate-50); +} + +.compare-card__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.compare-card__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; +} + +.compare-card__price { + font-size: 28px; + font-weight: 900; + color: var(--color-dark); + margin-bottom: 24px; +} + +.compare-card__features { + list-style: none; + padding: 0; + margin: 0 0 24px 0; + text-align: left; +} + +.compare-card__features li { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 0; + border-bottom: 1px solid var(--color-slate-100); + font-size: 14px; + color: var(--color-slate-600); +} + +.compare-card__features li:last-child { + border-bottom: none; +} + +/* ========================================================================= + DIFFERENCE HIGHLIGHT + ========================================================================= */ + +.diff-card { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; +} + +.diff-header { + padding: 20px 28px; + background: var(--color-slate-50); + border-bottom: 1px solid var(--color-slate-100); +} + +.diff-toggle { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; +} + +.diff-toggle input { + display: none; +} + +.diff-toggle__slider { + width: 48px; + height: 28px; + background: var(--color-slate-300); + border-radius: 14px; + position: relative; + transition: background 0.2s ease; +} + +.diff-toggle__slider::after { + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 20px; + height: 20px; + background: var(--color-white); + border-radius: 50%; + transition: transform 0.2s ease; +} + +.diff-toggle input:checked + .diff-toggle__slider { + background: var(--color-primary); +} + +.diff-toggle input:checked + .diff-toggle__slider::after { + transform: translateX(20px); +} + +.diff-toggle__label { + font-size: 14px; + font-weight: 600; + color: var(--color-dark); +} + +.diff-items { + padding: 8px; +} + +.diff-item { + display: flex; + align-items: center; + padding: 20px; + border-radius: 16px; +} + +.diff-item--different { + background: rgba(251, 191, 36, 0.08); +} + +.diff-item__label { + width: 140px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +.diff-item__values { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; +} + +.diff-item__value { + flex: 1; + text-align: center; + padding: 12px 20px; + background: var(--color-white); + border-radius: 12px; + font-size: 15px; + font-weight: 600; + color: var(--color-dark); +} + +.diff-item__value--better { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.diff-item__vs { + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; +} + +/* ========================================================================= + COMPARE BUTTONS + ========================================================================= */ + +.compare-buttons-demo { + display: flex; + flex-wrap: wrap; + gap: 16px; + padding: 40px; + background: var(--color-white); + border-radius: 24px; + justify-content: center; +} + +.compare-btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 14px 24px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-600); + cursor: pointer; + transition: all 0.2s ease; +} + +.compare-btn:hover { + background: var(--color-slate-200); + color: var(--color-dark); +} + +.compare-btn--active { + background: var(--color-primary); + color: var(--color-white); +} + +.compare-btn--active:hover { + background: #2563eb; +} + +.compare-btn--icon { + padding: 14px; + position: relative; +} + +.compare-btn__count { + position: absolute; + top: -6px; + right: -6px; + display: flex; + align-items: center; + justify-content: center; + min-width: 20px; + height: 20px; + padding: 0 6px; + background: var(--color-smart); + border-radius: 10px; + font-size: 11px; + font-weight: 700; + color: var(--color-dark); +} + +/* ========================================================================= + EMPTY STATE + ========================================================================= */ + +.empty-compare { + text-align: center; + padding: 80px 40px; + background: var(--color-white); + border-radius: 28px; +} + +.empty-compare__icon { + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 120px; + margin: 0 auto 32px; + background: var(--color-slate-100); + border-radius: 50%; + color: var(--color-slate-400); +} + +.empty-compare__title { + font-size: 32px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 12px 0; + text-transform: uppercase; +} + +.empty-compare__title span { + color: var(--color-primary); +} + +.empty-compare__text { + font-size: 16px; + color: var(--color-slate-500); + margin: 0 0 32px 0; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .compare-cards { + grid-template-columns: 1fr; + } + + .diff-item { + flex-direction: column; + gap: 12px; + } + + .diff-item__label { + width: 100%; + text-align: center; + } + + .diff-item__values { + width: 100%; + } +} diff --git a/skills/documatica-v12-design-system/references/compare.html b/skills/documatica-v12-design-system/references/compare.html new file mode 100644 index 00000000..d44db7e8 --- /dev/null +++ b/skills/documatica-v12-design-system/references/compare.html @@ -0,0 +1,369 @@ + + + + + + Compare — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● ANALYSIS +

COM
PARE

+

Сравнение товаров, характеристик и спецификаций.

+
+ + +
+
+ 01 +

COMPARE TABLE

+
+ +
+
+ +
+
+
+ +
+
+ +
+

Smart Watch
Series X

+
24 990 ₽
+ +
+
+
+ +
+
+ +
+

Smart Watch
Ultra Pro

+
34 990 ₽
+ +
+
+
+ +
+
+ +
+

Smart Watch
Lite

+
14 990 ₽
+ +
+
+
+ +
+
+ + +
+
ОСНОВНЫЕ
+
+ +
+
Дисплей
+
AMOLED, 1.9"
+
AMOLED, 2.1"
+
LCD, 1.5"
+
+
+ +
+
Разрешение
+
484×396 px
+
520×420 px
+
320×280 px
+
+
+ +
+
Процессор
+
Apple S9
+
Apple S9 Ultra
+
Apple S7
+
+
+ +
+
Память
+
64 ГБ
+
128 ГБ
+
32 ГБ
+
+
+ + +
+
БАТАРЕЯ
+
+ +
+
Ёмкость
+
410 mAh
+
542 mAh
+
280 mAh
+
+
+ +
+
Автономность
+
До 14 дней
+
До 10 дней
+
До 7 дней
+
+
+ +
+
Быстрая зарядка
+
✓
+
✓
+
—
+
+
+ + +
+
ДАТЧИКИ
+
+ +
+
GPS
+
✓
+
✓
+
✓
+
+
+ +
+
ЭКГ
+
✓
+
✓
+
—
+
+
+ +
+
Водозащита
+
5 ATM
+
10 ATM
+
3 ATM
+
+
+
+
+
+ + +
+
+ 02 +

COMPARE CARDS

+
+ +
+
+ ★ ЛУЧШИЙ ВЫБОР +
+ +
+

Smart Watch Series X

+
24 990 ₽
+
    +
  • ✓ AMOLED дисплей
    • +
  • ✓ 14 дней автономности
    • +
  • ✓ ЭКГ + SpO2
    • +
  • ✓ Быстрая зарядка
    • +
+ +
+ +
+
+ +
+

Smart Watch Lite

+
14 990 ₽
+
    +
  • — LCD дисплей
    • +
  • — 7 дней автономности
    • +
  • — Нет ЭКГ
    • +
  • — Нет быстрой зарядки
    • +
+ +
+
+
+ + +
+
+ 03 +

DIFFERENCE HIGHLIGHT

+
+ +
+
+ +
+ +
+
+ Дисплей +
+ AMOLED + VS + LCD +
+
+
+ Батарея +
+ 14 дней + VS + 7 дней +
+
+
+ Цена +
+ 24 990 ₽ + VS + 14 990 ₽ +
+
+
+
+
+ + +
+
+ 04 +

COMPARE BUTTONS

+
+ +
+ + + + + + + +
+
+ + +
+
+ 05 +

EMPTY STATE

+
+ +
+
+ + + + +
+

СРАВНЕНИЕ ПУСТО

+

Добавьте товары для сравнения характеристик

+ Перейти в каталог +
+
+ + +
+
+ 06 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Таблица сравнения -->
+<div class="compare-table">
+  <div class="compare-row compare-row--header">
+    <div class="compare-cell compare-cell--product">...</div>
+  </div>
+  <div class="compare-row">
+    <div class="compare-cell compare-cell--label">Характеристика</div>
+    <div class="compare-cell compare-cell--best">Лучшее значение</div>
+  </div>
+</div>
+
+/* Модификаторы */
+.compare-cell--best       /* Лучшее значение */
+.compare-card--winner     /* Лучший товар */
+.check--yes / .check--no  /* Галочки */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/containers.css b/skills/documatica-v12-design-system/references/containers.css new file mode 100644 index 00000000..e331b369 --- /dev/null +++ b/skills/documatica-v12-design-system/references/containers.css @@ -0,0 +1,716 @@ +/** + * Documatica Design System v12.0 + * Containers — Система контейнеров + */ + +/* ========================================================================= + DOCS STYLES + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--color-white); + color: var(--color-dark); + line-height: 1.6; + /* Паттерн точек Documatica */ + background-image: radial-gradient(circle, rgba(59, 130, 246, 0.08) 1px, transparent 1px); + background-size: 24px 24px; +} + +.docs-container { + max-width: 1000px; + margin: 0 auto; + padding: 0 var(--spacing-6); +} + +/* Back Link */ +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-8) 0 var(--spacing-6); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* Header */ +.docs-header { + padding-bottom: var(--spacing-16); +} + +.docs-header__badge { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-slate-300); +} + +.status-dot--active { + background: var(--color-smart); + box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); +} + +.docs-header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + line-height: 0.95; + letter-spacing: -0.02em; + color: var(--color-dark); + margin: 0 0 var(--spacing-6) 0; +} + +.text-primary { + color: var(--color-primary); +} + +.docs-header__desc { + font-size: var(--font-size-lg); + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* Sections */ +.docs-section { + padding: var(--spacing-10) 0; +} + +.section-header { + display: flex; + align-items: baseline; + gap: var(--spacing-4); + margin-bottom: var(--spacing-4); +} + +.section-index { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.section-title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin: 0; +} + +.section-desc { + font-size: var(--font-size-base); + color: var(--color-slate-500); + margin: 0 0 var(--spacing-6) 0; +} + +/* Footer */ +.docs-footer { + border-top: 1px solid var(--color-slate-200); + padding: var(--spacing-10) 0; + margin-top: var(--spacing-16); +} + +.docs-footer__inner { + display: flex; + align-items: center; + justify-content: space-between; +} + +.docs-footer p { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + margin: 0; +} + +.ai-status { + display: flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* ========================================================================= + CONTAINERS + ========================================================================= */ + +.container { + width: 100%; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-xs { + width: 100%; + max-width: 480px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-sm { + width: 100%; + max-width: 640px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-md { + width: 100%; + max-width: 768px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-lg { + width: 100%; + max-width: 1024px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-xl { + width: 100%; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-xxl { + width: 100%; + max-width: 1400px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-fluid { + width: 100%; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +.container-reading { + width: 100%; + max-width: 680px; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-6); + padding-right: var(--spacing-6); +} + +/* Breakout */ +.breakout { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +/* Padding variants */ +.px-0 { padding-left: 0; padding-right: 0; } +.px-sm { padding-left: 12px; padding-right: 12px; } +.px-md { padding-left: 24px; padding-right: 24px; } +.px-lg { padding-left: 48px; padding-right: 48px; } +.px-xl { padding-left: 64px; padding-right: 64px; } + +/* ========================================================================= + DEMO ELEMENTS + ========================================================================= */ + +.demo-full-width { + background: linear-gradient(90deg, + rgba(59, 130, 246, 0.02) 0%, + rgba(59, 130, 246, 0.05) 50%, + rgba(59, 130, 246, 0.02) 100% + ); + padding: var(--spacing-3) 0; + margin-bottom: var(--spacing-4); +} + +.container-demo-box { + background: var(--color-primary); + border-radius: 16px; + padding: var(--spacing-6); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 80px; +} + +.container-demo-box code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-white); + margin-bottom: var(--spacing-1); +} + +.container-demo-box span { + font-size: var(--font-size-sm); + color: rgba(255, 255, 255, 0.7); +} + +.container-demo-box--xs { background: #6366f1; } +.container-demo-box--sm { background: #8b5cf6; } +.container-demo-box--md { background: #a855f7; } +.container-demo-box--lg { background: #d946ef; } +.container-demo-box--xl { background: #ec4899; } +.container-demo-box--xxl { background: #f43f5e; } +.container-demo-box--fluid { background: var(--color-dark); } +.container-demo-box--reading { background: var(--color-success); } + +/* Reading Example */ +.reading-example { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + padding: var(--spacing-8); + margin-top: var(--spacing-6); +} + +.reading-example p { + font-size: var(--font-size-base); + line-height: 1.8; + color: var(--color-slate-600); + margin: 0 0 var(--spacing-4) 0; +} + +.reading-example p:last-child { + margin-bottom: 0; +} + +/* Content Block */ +.content-block { + background: var(--color-slate-100); + border-radius: 12px; + padding: var(--spacing-4); + text-align: center; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + margin: var(--spacing-2) 0; +} + +/* Breakout Content */ +.breakout-content { + background: var(--color-smart); + padding: var(--spacing-10); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.breakout-content code { + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin-bottom: var(--spacing-2); +} + +.breakout-content span { + font-size: var(--font-size-sm); + color: rgba(15, 23, 42, 0.6); +} + +/* ========================================================================= + BREAKPOINTS TABLE + ========================================================================= */ + +.breakpoints-table { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + overflow: hidden; + overflow-x: auto; +} + +.bp-row { + display: grid; + grid-template-columns: 160px repeat(6, 1fr); + min-width: 700px; +} + +.bp-row--header { + background: var(--color-slate-50); +} + +.bp-row--header .bp-cell { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.bp-row--header .bp-cell small { + display: block; + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + margin-top: 2px; +} + +.bp-cell { + padding: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-100); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + text-align: center; +} + +.bp-cell:first-child { + text-align: left; + border-right: 1px solid var(--color-slate-100); +} + +.bp-cell code { + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xs); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + padding: 2px 6px; + border-radius: 4px; +} + +.bp-row:last-child .bp-cell { + border-bottom: none; +} + +/* ========================================================================= + NESTED DEMO + ========================================================================= */ + +.nested-demo { + padding: var(--spacing-6); + background: var(--color-slate-50); + border-radius: 16px; +} + +.nested-outer { + background: rgba(59, 130, 246, 0.1); + border: 2px dashed var(--color-primary); + border-radius: 12px; + padding: var(--spacing-6); + position: relative; +} + +.nested-inner { + background: rgba(139, 92, 246, 0.1); + border: 2px dashed #8b5cf6; + border-radius: 10px; + padding: var(--spacing-6); + margin: 0 auto; + max-width: 600px; +} + +.nested-content { + background: rgba(16, 185, 129, 0.1); + border: 2px dashed var(--color-success); + border-radius: 8px; + padding: var(--spacing-6); + margin: 0 auto; + max-width: 400px; + text-align: center; +} + +.nested-label { + display: inline-block; + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: var(--color-white); + padding: 2px 8px; + border-radius: 4px; + margin-bottom: var(--spacing-2); +} + +.nested-content p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-600); +} + +/* ========================================================================= + EXAMPLE HERO + ========================================================================= */ + +.example-hero { + background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%); + padding: var(--spacing-16) 0; + margin: var(--spacing-8) 0; +} + +.example-hero__content { + max-width: 600px; +} + +.example-hero__badge { + display: inline-block; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: 0.15em; + margin-bottom: var(--spacing-4); +} + +.example-hero__title { + font-size: clamp(36px, 5vw, 56px); + font-weight: var(--font-weight-black); + line-height: 0.95; + color: var(--color-dark); + margin: 0 0 var(--spacing-6) 0; +} + +.example-hero__desc { + font-size: var(--font-size-lg); + color: var(--color-slate-500); + margin: 0 0 var(--spacing-8) 0; +} + +.example-hero__buttons { + display: flex; + gap: var(--spacing-4); +} + +/* ========================================================================= + EXAMPLE DASHBOARD + ========================================================================= */ + +.example-dashboard { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 20px; + padding: var(--spacing-8); +} + +.example-dashboard__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--spacing-8); +} + +.example-dashboard__header h3 { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin: 0; +} + +.example-dashboard__stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); +} + +.stat-card { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + padding: var(--spacing-6); +} + +.stat-card--active { + background: var(--color-dark); + border-color: var(--color-dark); +} + +.stat-card__label { + display: block; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-3); +} + +.stat-card--active .stat-card__label { + color: var(--color-slate-500); +} + +.stat-card__value { + display: block; + font-size: 36px; + font-weight: var(--font-weight-black); + color: var(--color-dark); + line-height: 1; + margin-bottom: var(--spacing-2); +} + +.stat-card__status { + display: block; + font-size: 28px; + font-weight: var(--font-weight-black); + color: var(--color-white); + line-height: 1; + margin-bottom: var(--spacing-2); +} + +.stat-card__change { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.stat-card__change--up { + color: var(--color-primary); +} + +.stat-card--active .stat-card__change { + color: var(--color-success); +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2); + padding: var(--spacing-4) var(--spacing-8); + font-family: inherit; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.05em; + text-decoration: none; + border: none; + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn--primary { + background: var(--color-dark); + color: var(--color-white); +} + +.btn--primary:hover { + background: #1e293b; + transform: translateY(-1px); +} + +.btn--secondary { + background: var(--color-white); + color: var(--color-dark); + border: 1px solid var(--color-slate-200); +} + +.btn--secondary:hover { + border-color: var(--color-slate-300); +} + +.btn--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.btn--smart:hover { + background: #f59e0b; + transform: translateY(-1px); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + overflow: hidden; + margin-bottom: var(--spacing-6); +} + +.code-block__header { + background: rgba(255, 255, 255, 0.1); + padding: var(--spacing-3) var(--spacing-4); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.code-block__header span { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.code-block pre { + margin: 0; + padding: var(--spacing-6); + overflow-x: auto; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .docs-container { + padding: 0 var(--spacing-4); + } + + .example-dashboard__stats { + grid-template-columns: 1fr; + } + + .example-hero__buttons { + flex-direction: column; + } + + .bp-row { + grid-template-columns: 120px repeat(6, 80px); + } +} diff --git a/skills/documatica-v12-design-system/references/containers.html b/skills/documatica-v12-design-system/references/containers.html new file mode 100644 index 00000000..e2da0a27 --- /dev/null +++ b/skills/documatica-v12-design-system/references/containers.html @@ -0,0 +1,476 @@ + + + + + + Containers — Documatica v12.0 + + + + + + +
+ + + ← Вернуться к компонентам + + +
+
+ + CONTAINER PROTOCOL V12.0 +
+

+ КОНТЕЙНЕРЫ
+ И СЕТКА. +

+

+ Система контейнеров для управления шириной контента.
+ Адаптивные брейкпоинты и центрирование. +

+
+ +
+ + +
+
+
+ 01 +

Фиксированный контейнер

+
+

Центрированный контейнер с максимальной шириной. Стандарт для контента.

+
+
+ +
+
+
+ .container + max-width: 1200px + auto margins +
+
+
+ + +
+
+
+ 02 +

Размеры контейнеров

+
+
+
+ +
+
+
+ .container-xs + max-width: 480px +
+
+
+ +
+
+
+ .container-sm + max-width: 640px +
+
+
+ +
+
+
+ .container-md + max-width: 768px +
+
+
+ +
+
+
+ .container-lg + max-width: 1024px +
+
+
+ +
+
+
+ .container-xl + max-width: 1280px +
+
+
+ +
+
+
+ .container-xxl + max-width: 1400px +
+
+
+ + +
+
+
+ 03 +

Резиновый контейнер

+
+

Занимает 100% ширины с боковыми отступами. Для полноширинных секций.

+
+
+ +
+
+ .container-fluid + width: 100% + padding: 0 24px +
+
+ + +
+
+
+ 04 +

Контейнер для чтения

+
+

Оптимальная ширина 65-75 символов для комфортного чтения текста.

+
+
+ +
+
+
+ .container-reading + max-width: 680px — идеально для статей +
+
+

Это пример текста оптимальной ширины для чтения. Исследования показывают, что идеальная длина строки составляет 65-75 символов. Такая ширина обеспечивает комфортное чтение без необходимости сильно двигать глазами из стороны в сторону.

+

Documatica использует этот принцип для всех текстовых блоков и статей в системе документооборота. Пользователи могут сосредоточиться на содержании, не отвлекаясь на неудобную вёрстку.

+
+
+
+ + +
+
+
+ 05 +

Breakout (Full Bleed)

+
+

Элемент выходит за пределы контейнера на всю ширину экрана.

+
+
+ +
+
+ Обычный контент внутри .container +
+
+ +
+
+ .breakout + Full-width секция, выходящая за контейнер +
+
+ +
+
+ Контент продолжается в .container +
+
+ + +
+
+
+ 06 +

Варианты отступов

+
+
+
+ +
+
+
+ .container.px-0 + padding: 0 +
+
+
+ +
+
+
+ .container.px-sm + padding: 0 12px +
+
+
+ +
+
+
+ .container.px-md + padding: 0 24px (default) +
+
+
+ +
+
+
+ .container.px-lg + padding: 0 48px +
+
+
+ +
+
+
+ .container.px-xl + padding: 0 64px +
+
+
+ + +
+
+
+ 07 +

Таблица брейкпоинтов

+
+ +
+
+
Контейнер
+
xs
<576px
+
sm
≥576px
+
md
≥768px
+
lg
≥992px
+
xl
≥1200px
+
xxl
≥1400px
+
+
+
.container
+
100%
+
540px
+
720px
+
960px
+
1140px
+
1320px
+
+
+
.container-fluid
+
100%
+
100%
+
100%
+
100%
+
100%
+
100%
+
+
+
.container-sm
+
100%
+
540px
+
540px
+
540px
+
540px
+
540px
+
+
+
.container-lg
+
100%
+
100%
+
100%
+
960px
+
960px
+
960px
+
+
+
+ + +
+
+ 08 +

Вложенные контейнеры

+
+

Контейнеры можно вкладывать для создания сложных лейаутов.

+ +
+
+ .container-xl +
+ .container-md +
+ .container-reading +

Центрированный контент

+
+
+
+
+
+ + +
+
+ 09 +

Примеры использования

+
+
+
+ + +
+
+
+ DOCUMATICA V12.0 +

+ АВТОМАТИЗАЦИЯ
+ ДОКУМЕНТОВ. +

+

Контейнер центрирует контент и ограничивает ширину для удобства чтения.

+
+ + +
+
+
+
+ + +
+
+
+
+

Центральный терминал

+ +
+
+
+ ВСЕГО ДОКУМЕНТОВ + 1,284 + +12% за неделю +
+
+ AI АУДИТЫ + 856 + 99.8% точность +
+
+ СТАТУС API + ACTIVE + 34.2 MS RESPONSE +
+
+
+
+ + +
+
+ 10 +

Код

+
+ +
+
+ HTML +
+ 
<!-- Фиксированный контейнер -->
+<div class="container">
+    Контент с max-width: 1200px
+</div>
+
+<!-- Резиновый контейнер -->
+<div class="container-fluid">
+    Контент на всю ширину
+</div>
+
+<!-- Контейнер для чтения -->
+<div class="container-reading">
+    Текст статьи с оптимальной шириной
+</div>
+
+<!-- Breakout -->
+<div class="container">
+    <p>Обычный контент</p>
+</div>
+<div class="breakout">
+    Full-width изображение или секция
+</div>
+<div class="container">
+    <p>Контент продолжается</p>
+</div>
+
+<!-- Размеры -->
+<div class="container-xs">480px</div>
+<div class="container-sm">640px</div>
+<div class="container-md">768px</div>
+<div class="container-lg">1024px</div>
+<div class="container-xl">1280px</div>
+<div class="container-xxl">1400px</div>
+
+ +
+
+ CSS +
+ 
.container {
+    width: 100%;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+}
+
+.container-fluid {
+    width: 100%;
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+}
+
+.container-reading {
+    max-width: 680px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.breakout {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/datepicker.css b/skills/documatica-v12-design-system/references/datepicker.css new file mode 100644 index 00000000..1d074808 --- /dev/null +++ b/skills/documatica-v12-design-system/references/datepicker.css @@ -0,0 +1,578 @@ +/** + * Documatica Design System v12.0 + * Date Picker Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + DATE INPUT + ========================================================================= */ + +.date-input { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-base); + max-width: 280px; +} + +.date-input:hover, +.date-input:focus-within { + border-color: var(--color-primary); +} + +.date-input__icon { + width: 20px; + height: 20px; + color: var(--color-primary); + flex-shrink: 0; +} + +.date-input input { + flex: 1; + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: none; + border: none; + outline: none; +} + +.date-input input::placeholder { + color: var(--color-slate-400); +} + +.date-input__chevron { + width: 20px; + height: 20px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +/* ========================================================================= + DATE RANGE INPUTS + ========================================================================= */ + +.date-range-inputs { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.date-range-separator { + color: var(--color-slate-400); + font-weight: var(--font-weight-medium); +} + +.date-range-inputs .date-input { + max-width: 180px; +} + +/* ========================================================================= + CALENDAR + ========================================================================= */ + +.calendar-container { + max-width: 340px; +} + +.calendar-container--range { + max-width: 400px; +} + +.calendar { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + padding: var(--spacing-5); + box-shadow: var(--shadow-lg); +} + +.calendar__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-5); +} + +.calendar__nav { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-600); + cursor: pointer; + transition: var(--transition-base); +} + +.calendar__nav:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.calendar__nav svg { + width: 20px; + height: 20px; +} + +.calendar__title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.calendar__weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; + margin-bottom: var(--spacing-2); +} + +.calendar__weekdays span { + display: flex; + align-items: center; + justify-content: center; + height: 36px; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; +} + +.calendar__days { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} + +.calendar__days--compact { + gap: 1px; +} + +.calendar__day { + width: 100%; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: none; + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.calendar__day:hover { + background: var(--color-slate-100); +} + +.calendar__day--other { + color: var(--color-slate-300); +} + +.calendar__day--today { + color: var(--color-primary); + font-weight: var(--font-weight-bold); + background: rgba(59, 130, 246, 0.1); +} + +.calendar__day--selected { + color: var(--color-white); + background: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +.calendar__day--selected:hover { + background: #2563eb; +} + +/* Range Selection */ +.calendar__day--range-start, +.calendar__day--range-end { + color: var(--color-white); + background: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +.calendar__day--range-start { + border-radius: var(--radius-lg) 0 0 var(--radius-lg); +} + +.calendar__day--range-end { + border-radius: 0 var(--radius-lg) var(--radius-lg) 0; +} + +.calendar__day--in-range { + background: rgba(59, 130, 246, 0.15); + border-radius: 0; + color: var(--color-primary); +} + +/* Event Indicator */ +.calendar__day--event { + position: relative; +} + +.calendar__day--event::after { + content: ''; + position: absolute; + bottom: 4px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 4px; + background: var(--color-smart); + border-radius: var(--radius-full); +} + +/* ========================================================================= + TIME PICKER + ========================================================================= */ + +.time-picker { + display: flex; + justify-content: center; + align-items: center; + gap: var(--spacing-3); + padding-top: var(--spacing-5); + margin-top: var(--spacing-4); + border-top: 1px solid var(--color-slate-200); +} + +.time-picker__column { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-1); +} + +.time-picker__nav { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.time-picker__nav:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.time-picker__nav svg { + width: 16px; + height: 16px; +} + +.time-picker__value { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + background: var(--color-slate-100); + border-radius: var(--radius-lg); +} + +.time-picker__separator { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); +} + +/* ========================================================================= + MONTH PICKER + ========================================================================= */ + +.month-year-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-6); +} + +.calendar--month, +.calendar--year { + width: 100%; +} + +.calendar__months, +.calendar__years { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-2); +} + +.calendar__month, +.calendar__year { + padding: var(--spacing-3) var(--spacing-2); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: none; + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.calendar__month:hover, +.calendar__year:hover { + background: var(--color-slate-100); +} + +.calendar__month--selected, +.calendar__year--selected { + color: var(--color-white); + background: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +.calendar__month--selected:hover, +.calendar__year--selected:hover { + background: #2563eb; +} + +/* ========================================================================= + INLINE CALENDAR + ========================================================================= */ + +.calendar--inline { + max-width: 340px; +} + +.calendar__footer { + display: flex; + justify-content: center; + padding-top: var(--spacing-4); + margin-top: var(--spacing-4); + border-top: 1px solid var(--color-slate-200); +} + +.calendar__today-btn { + padding: var(--spacing-2) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: none; + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.calendar__today-btn:hover { + background: rgba(59, 130, 246, 0.1); +} + +/* ========================================================================= + DARK CALENDAR + ========================================================================= */ + +.calendar--dark { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +.calendar--dark .calendar__title { + color: var(--color-white); +} + +.calendar--dark .calendar__nav { + color: var(--color-slate-400); +} + +.calendar--dark .calendar__nav:hover { + background: var(--color-slate-700); + color: var(--color-white); +} + +.calendar--dark .calendar__weekdays span { + color: var(--color-slate-500); +} + +.calendar--dark .calendar__day { + color: var(--color-slate-300); +} + +.calendar--dark .calendar__day:hover { + background: var(--color-slate-700); + color: var(--color-white); +} + +.calendar--dark .calendar__day--other { + color: var(--color-slate-600); +} + +.calendar--dark .calendar__day--today { + color: var(--color-primary); + background: rgba(59, 130, 246, 0.2); +} + +.calendar--dark .calendar__day--selected { + color: var(--color-white); + background: var(--color-primary); +} + +/* ========================================================================= + DATETIME CONTAINER + ========================================================================= */ + +.datetime-container { + max-width: 340px; +} + +.calendar--datetime .calendar__days { + gap: 1px; +} + +.calendar--datetime .calendar__day { + font-size: var(--font-size-xs); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .month-year-grid { + grid-template-columns: 1fr; + } + + .date-range-inputs { + flex-direction: column; + } + + .date-range-inputs .date-input { + max-width: 100%; + width: 100%; + } + + .date-range-separator { + transform: rotate(90deg); + } +} diff --git a/skills/documatica-v12-design-system/references/datepicker.html b/skills/documatica-v12-design-system/references/datepicker.html new file mode 100644 index 00000000..7dd1f353 --- /dev/null +++ b/skills/documatica-v12-design-system/references/datepicker.html @@ -0,0 +1,505 @@ + + + + + + Date Picker — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Date Picker Protocol v12.0 +
+

+ Date Picker +

+
+ + +
+

01. Date Input Field

+
+ + + + + + + +
+
+ + +
+

02. Calendar Dropdown

+
+
+
+ + Январь 2025 + +
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+

03. Date Range Picker

+
+
+ + + + +
+ — +
+ + + + +
+
+
+
+
+ + Январь 2025 + +
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+

04. Date & Time Picker

+
+
+
+ + Январь 2025 + +
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + 14 + +
+ : +
+ + 30 + +
+
+
+
+
+ + +
+

05. Month & Year Picker

+
+
+
+
+ + 2025 + +
+
+ + + + + + + + + + + + +
+
+
+
+
+
+ + 2020-2031 + +
+
+ + + + + + + + + + + + +
+
+
+
+
+ + +
+

06. Inline Calendar

+
+
+ + Январь 2025 + +
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+ + +
+

07. Dark Calendar

+
+
+ + Январь 2025 + +
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/dividers.css b/skills/documatica-v12-design-system/references/dividers.css new file mode 100644 index 00000000..5289f708 --- /dev/null +++ b/skills/documatica-v12-design-system/references/dividers.css @@ -0,0 +1,348 @@ +/** + * Documatica Design System v12.0 + * Divider Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* Demo Box */ +.demo-box { + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.demo-box--horizontal { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.demo-text { + margin: 0; + font-size: var(--font-size-base); + color: var(--color-slate-600); +} + +.demo-label { + margin: var(--spacing-4) 0 var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); +} + +.demo-label:first-child { + margin-top: 0; +} + +.demo-item { + font-size: var(--font-size-base); + color: var(--color-dark); +} + +/* ========================================================================= + HORIZONTAL DIVIDER + ========================================================================= */ + +.divider { + width: 100%; + height: 2px; + border: none; + background: var(--color-slate-200); + margin: var(--spacing-4) 0; +} + +/* Weights */ +.divider--light { + height: 1px; +} + +.divider--medium { + height: 3px; +} + +.divider--bold { + height: 4px; +} + +/* Colors */ +.divider--primary { + background: var(--color-primary); +} + +.divider--smart { + background: var(--color-smart); +} + +.divider--success { + background: var(--color-success); +} + +.divider--danger { + background: var(--color-danger); +} + +/* Styles */ +.divider--dashed { + background: transparent; + border-top: 2px dashed var(--color-slate-300); + height: 0; +} + +.divider--dotted { + background: transparent; + border-top: 2px dotted var(--color-slate-300); + height: 0; +} + +/* Spacing */ +.divider--compact { + margin: var(--spacing-2) 0; +} + +.divider--loose { + margin: var(--spacing-8) 0; +} + +/* ========================================================================= + WITH TEXT + ========================================================================= */ + +.divider-text { + display: flex; + align-items: center; + margin: var(--spacing-6) 0; +} + +.divider-text::before, +.divider-text::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-slate-200); +} + +.divider-text span { + padding: 0 var(--spacing-4); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.divider-text--left::before { + flex: 0 0 40px; +} + +.divider-text--right::after { + flex: 0 0 40px; +} + +/* ========================================================================= + WITH ICON + ========================================================================= */ + +.divider-icon { + display: flex; + align-items: center; + justify-content: center; + margin: var(--spacing-6) 0; + position: relative; +} + +.divider-icon::before, +.divider-icon::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-slate-200); +} + +.divider-icon svg { + width: 24px; + height: 24px; + margin: 0 var(--spacing-4); + color: var(--color-slate-400); +} + +.divider-icon--smart svg { + color: var(--color-smart); +} + +/* ========================================================================= + VERTICAL DIVIDER + ========================================================================= */ + +.divider-v { + display: inline-block; + width: 1px; + height: 20px; + background: var(--color-slate-300); +} + +.divider-v--tall { + height: 32px; +} + +/* ========================================================================= + GRADIENT DIVIDERS + ========================================================================= */ + +.divider--gradient { + height: 2px; + background: linear-gradient(90deg, transparent, var(--color-primary), transparent); +} + +.divider--gradient-gold { + height: 2px; + background: linear-gradient(90deg, transparent, var(--color-smart), transparent); +} + +.divider--fade { + height: 1px; + background: linear-gradient(90deg, var(--color-slate-200), transparent); +} + +/* ========================================================================= + DECORATIVE + ========================================================================= */ + +.divider-decorative { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-3); + margin: var(--spacing-8) 0; +} + +.divider-decorative__dot { + width: 6px; + height: 6px; + background: var(--color-slate-300); + border-radius: var(--radius-full); +} + +.divider-decorative--stars { + gap: var(--spacing-4); +} + +.divider-decorative--stars span { + font-size: var(--font-size-sm); + color: var(--color-smart); +} + +.divider-wave { + margin: var(--spacing-6) 0; + color: var(--color-slate-200); +} + +.divider-wave svg { + width: 100%; + height: 20px; +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/dividers.html b/skills/documatica-v12-design-system/references/dividers.html new file mode 100644 index 00000000..9f7fab1f --- /dev/null +++ b/skills/documatica-v12-design-system/references/dividers.html @@ -0,0 +1,215 @@ + + + + + + Dividers — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Divider Protocol v12.0 +
+

+ Dividers +

+
+ + +
+

01. Basic Divider

+
+

Контент до разделителя

+
+

Контент после разделителя

+
+
+ + +
+

02. Weights

+
+

Light (1px)

+
+ +

Base (2px)

+
+ +

Medium (3px)

+
+ +

Bold (4px)

+
+
+
+ + +
+

03. Colors

+
+

Default (Slate)

+
+ +

Primary

+
+ +

Smart Gold

+
+ +

Success

+
+ +

Danger

+
+
+
+ + +
+

04. Styles

+
+

Solid

+
+ +

Dashed

+
+ +

Dotted

+
+
+
+ + +
+

05. With Text

+
+
+ ИЛИ +
+ +
+ Глава 1 +
+ +
+ Продолжение +
+
+
+ + +
+

06. With Icon

+
+
+ + + +
+ +
+ + + +
+
+
+ + +
+

07. Vertical Divider

+
+ Главная + + Документы + + Настройки +
+ +
+ Файл + + Редактирование + + Вид + + Справка +
+
+ + +
+

08. Spacing Variants

+
+

Compact (8px)

+
+

Контент

+ +

Base (16px)

+
+

Контент

+ +

Loose (32px)

+
+

Контент

+
+
+ + +
+

09. Gradient Dividers

+
+
+
+
+
+
+
+
+ + +
+

10. Decorative

+
+
+ + + +
+ +
+ ✦ + ✦ + ✦ +
+ +
+ + + +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/empty-states.css b/skills/documatica-v12-design-system/references/empty-states.css new file mode 100644 index 00000000..c8040351 --- /dev/null +++ b/skills/documatica-v12-design-system/references/empty-states.css @@ -0,0 +1,483 @@ +/** + * Documatica Design System v12.0 + * Empty States Components + */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + EMPTY STATE BASE + ========================================================================= */ + +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--spacing-12); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.empty-state__icon { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: var(--radius-2xl); + color: var(--color-slate-400); + margin-bottom: var(--spacing-6); +} + +.empty-state__icon svg { + width: 40px; + height: 40px; +} + +.empty-state__icon--sm { + width: 56px; + height: 56px; +} + +.empty-state__icon--sm svg { + width: 28px; + height: 28px; +} + +.empty-state__icon--primary { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.empty-state__icon--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.empty-state__icon--muted { + background: var(--color-slate-100); + color: var(--color-slate-300); +} + +.empty-state__icon--smart { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.empty-state__title { + margin: 0 0 var(--spacing-2); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.empty-state__text { + margin: 0; + font-size: var(--font-size-base); + color: var(--color-slate-500); + max-width: 360px; + line-height: var(--line-height-relaxed); +} + +.empty-state__text strong { + color: var(--color-dark); +} + +/* ========================================================================= + WITH ACTION + ========================================================================= */ + +.empty-state__btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + margin-top: var(--spacing-6); + padding: var(--spacing-3) var(--spacing-6); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border: none; + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-spring); +} + +.empty-state__btn svg { + width: 20px; + height: 20px; +} + +.empty-state__btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.empty-state__btn--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.empty-state__btn--outline { + background: transparent; + color: var(--color-slate-600); + border: 2px solid var(--color-slate-300); +} + +.empty-state__btn--outline:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.empty-state__btn--primary { + background: var(--color-primary); +} + +.empty-state__actions { + display: flex; + gap: var(--spacing-3); + margin-top: var(--spacing-6); +} + +/* ========================================================================= + SUGGESTIONS + ========================================================================= */ + +.empty-state__suggestions { + margin-top: var(--spacing-6); + padding-top: var(--spacing-6); + border-top: 1px solid var(--color-slate-100); +} + +.suggestion-label { + display: block; + font-size: var(--font-size-sm); + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.suggestion-tags { + display: flex; + gap: var(--spacing-2); + justify-content: center; +} + +.suggestion-tag { + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-base); +} + +.suggestion-tag:hover { + background: rgba(59, 130, 246, 0.2); +} + +/* ========================================================================= + SUCCESS STATE + ========================================================================= */ + +.empty-state--success { + background: rgba(16, 185, 129, 0.03); + border-color: rgba(16, 185, 129, 0.2); +} + +/* ========================================================================= + COMPACT + ========================================================================= */ + +.empty-state--compact { + padding: var(--spacing-8); +} + +/* ========================================================================= + AI STATE + ========================================================================= */ + +.empty-state--ai { + position: relative; + background: var(--color-dark); + border-color: var(--color-slate-700); + overflow: hidden; +} + +.empty-state__glow { + position: absolute; + top: -100px; + left: 50%; + transform: translateX(-50%); + width: 300px; + height: 300px; + background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%); + pointer-events: none; +} + +.empty-state--ai .empty-state__title { + color: var(--color-white); +} + +.empty-state--ai .empty-state__text { + color: var(--color-slate-400); +} + +/* ========================================================================= + TABLE EMPTY + ========================================================================= */ + +.table-empty { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.table-empty__header { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-slate-50); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + border-bottom: 1px solid var(--color-slate-200); +} + +.table-empty__body { + padding: var(--spacing-10); +} + +.empty-state--inline { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: var(--spacing-3); + padding: 0; + background: transparent; + border: none; +} + +.empty-state--inline svg { + width: 24px; + height: 24px; + color: var(--color-slate-400); +} + +.empty-state--inline span { + font-size: var(--font-size-base); + color: var(--color-slate-400); +} + +/* ========================================================================= + ONBOARDING + ========================================================================= */ + +.empty-state--onboarding { + padding: var(--spacing-16); +} + +.onboarding-illustration { + position: relative; + width: 120px; + height: 120px; + margin-bottom: var(--spacing-8); +} + +.onboarding-circle { + position: absolute; + border-radius: var(--radius-full); + border: 2px solid var(--color-primary); + opacity: 0.2; + animation: pulse 2s ease-in-out infinite; +} + +.onboarding-circle--1 { + inset: 0; +} + +.onboarding-circle--2 { + inset: 10px; + animation-delay: 0.3s; +} + +.onboarding-circle--3 { + inset: 20px; + animation-delay: 0.6s; +} + +@keyframes pulse { + 0%, 100% { opacity: 0.2; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(1.05); } +} + +.onboarding-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 48px; + height: 48px; + color: var(--color-primary); +} + +.onboarding-steps { + display: flex; + gap: var(--spacing-6); + margin-top: var(--spacing-8); + margin-bottom: var(--spacing-8); +} + +.onboarding-step { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.onboarding-step__num { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-full); +} + +.onboarding-step__text { + font-size: var(--font-size-sm); + color: var(--color-slate-600); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .empty-state { + padding: var(--spacing-8); + } + + .empty-state__actions { + flex-direction: column; + } + + .onboarding-steps { + flex-direction: column; + gap: var(--spacing-3); + } + + .table-empty__header { + display: none; + } +} diff --git a/skills/documatica-v12-design-system/references/empty-states.html b/skills/documatica-v12-design-system/references/empty-states.html new file mode 100644 index 00000000..abd45fe3 --- /dev/null +++ b/skills/documatica-v12-design-system/references/empty-states.html @@ -0,0 +1,202 @@ + + + + + + Empty States — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Empty State Protocol v12.0 +
+

+ Empty States +

+
+ + +
+

01. Basic Empty State

+
+
+ + + +
+

Нет документов

+

Начните добавлять документы, чтобы увидеть их здесь

+
+
+ + +
+

02. With Action Button

+
+
+ + + +
+

Папка пуста

+

Эта папка ещё не содержит файлов. Загрузите первый документ!

+ +
+
+ + +
+

03. Search No Results

+
+
+ + + +
+

Ничего не найдено

+

По запросу "договор аренды 2025" результатов не найдено

+
+ Попробуйте: +
+ договор + аренда + 2024 +
+
+
+
+ + +
+

04. Inbox Zero

+
+
+ + + +
+

Всё готово!

+

Вы обработали все входящие сообщения. Отличная работа!

+
+
+ + +
+

05. No Notifications

+
+
+ + + +
+

Нет уведомлений

+

Когда появятся новые уведомления, они будут здесь

+
+
+ + +
+

06. AI Ready State

+
+
+
+ + + +
+

AI готов к работе

+

Загрузите документы, и AI автоматически их проанализирует, классифицирует и создаст умный индекс

+
+ + +
+
+
+ + +
+

07. Empty Table

+
+
+ Название + Дата + Статус + Действия +
+
+
+ + + + Нет данных для отображения +
+
+
+
+ + +
+

08. First Time / Onboarding

+
+
+
+
+
+ + + +
+

Добро пожаловать в Documatica!

+

Давайте настроим ваше рабочее пространство за несколько простых шагов

+
+
+ 1 + Загрузите документы +
+
+ 2 + AI проанализирует +
+
+ 3 + Начните работу +
+
+ +
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/error-pages.css b/skills/documatica-v12-design-system/references/error-pages.css new file mode 100644 index 00000000..40472d25 --- /dev/null +++ b/skills/documatica-v12-design-system/references/error-pages.css @@ -0,0 +1,444 @@ +/** + * Documatica Design System v12.0 + * Error Pages Components + */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + ERROR PAGE BASE + ========================================================================= */ + +.error-page { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--spacing-16); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.error-code { + font-size: 120px; + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + line-height: 1; + margin-bottom: var(--spacing-4); +} + +.error-code--sm { + font-size: 64px; +} + +.error-code--glitch { + color: var(--color-danger); + text-shadow: + 2px 0 var(--color-smart), + -2px 0 var(--color-primary); + animation: glitch 0.3s ease-in-out infinite alternate; +} + +@keyframes glitch { + 0% { text-shadow: 2px 0 var(--color-smart), -2px 0 var(--color-primary); } + 100% { text-shadow: -2px 0 var(--color-smart), 2px 0 var(--color-primary); } +} + +.error-icon { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + margin-bottom: var(--spacing-4); +} + +.error-icon svg { + width: 40px; + height: 40px; +} + +.error-icon--danger { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +.error-icon--warning { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.error-icon--muted { + background: var(--color-slate-100); + color: var(--color-slate-400); +} + +.error-title { + margin: 0 0 var(--spacing-3); + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.error-text { + margin: 0 0 var(--spacing-6); + font-size: var(--font-size-base); + color: var(--color-slate-500); + max-width: 400px; + line-height: var(--line-height-relaxed); +} + +.error-status { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-bottom: var(--spacing-6); + padding: var(--spacing-2) var(--spacing-4); + background: var(--color-slate-800); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.error-status__dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); +} + +.error-status__dot--warning { + background: var(--color-smart); + animation: pulse-dot 1s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +/* ========================================================================= + ERROR ACTIONS + ========================================================================= */ + +.error-actions { + display: flex; + gap: var(--spacing-3); + flex-wrap: wrap; + justify-content: center; +} + +.error-btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-3) var(--spacing-6); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + text-decoration: none; + border: none; + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-spring); +} + +.error-btn svg { + width: 20px; + height: 20px; +} + +.error-btn--primary { + color: var(--color-white); + background: var(--color-primary); +} + +.error-btn--primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.error-btn--smart { + color: var(--color-dark); + background: var(--color-smart); +} + +.error-btn--outline { + color: var(--color-slate-600); + background: transparent; + border: 2px solid var(--color-slate-300); +} + +.error-btn--outline:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.error-btn--ghost { + color: var(--color-slate-400); + background: transparent; +} + +.error-btn--ghost:hover { + color: var(--color-white); +} + +/* ========================================================================= + DARK ERROR PAGE + ========================================================================= */ + +.error-page--dark { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +.error-page--dark .error-title { + color: var(--color-white); +} + +.error-page--dark .error-text { + color: var(--color-slate-400); +} + +/* ========================================================================= + MAINTENANCE + ========================================================================= */ + +.error-page--maintenance { + background: linear-gradient(135deg, #f0f9ff, #fefce8); + border: none; +} + +.maintenance-animation { + position: relative; + width: 80px; + height: 80px; + margin-bottom: var(--spacing-6); +} + +.gear { + position: absolute; + font-size: 40px; + color: var(--color-primary); +} + +.gear--1 { + top: 0; + left: 0; + animation: rotate 3s linear infinite; +} + +.gear--2 { + bottom: 0; + right: 0; + font-size: 32px; + animation: rotate 3s linear infinite reverse; +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.maintenance-timer { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-bottom: var(--spacing-6); +} + +.timer-block { + display: flex; + flex-direction: column; + align-items: center; + padding: var(--spacing-3) var(--spacing-4); + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); +} + +.timer-value { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + font-variant-numeric: tabular-nums; +} + +.timer-label { + font-size: var(--font-size-xs); + color: var(--color-slate-400); + text-transform: uppercase; +} + +.timer-sep { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-slate-300); +} + +/* ========================================================================= + INLINE ERROR + ========================================================================= */ + +.error-inline { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-4) var(--spacing-5); + background: rgba(220, 38, 38, 0.05); + border: 1px solid rgba(220, 38, 38, 0.2); + border-radius: var(--radius-xl); +} + +.error-inline svg { + width: 24px; + height: 24px; + color: var(--color-danger); + flex-shrink: 0; +} + +.error-inline span { + flex: 1; + font-size: var(--font-size-base); + color: var(--color-danger); +} + +.error-inline__btn { + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-danger); + background: rgba(220, 38, 38, 0.1); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.error-inline__btn:hover { + background: rgba(220, 38, 38, 0.2); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .error-page { + padding: var(--spacing-10); + } + + .error-code { + font-size: 80px; + } + + .error-actions { + flex-direction: column; + width: 100%; + } + + .error-btn { + width: 100%; + justify-content: center; + } +} diff --git a/skills/documatica-v12-design-system/references/error-pages.html b/skills/documatica-v12-design-system/references/error-pages.html new file mode 100644 index 00000000..fd83cb78 --- /dev/null +++ b/skills/documatica-v12-design-system/references/error-pages.html @@ -0,0 +1,172 @@ + + + + + + Error Pages — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Error Protocol v12.0 +
+

+ Error Pages +

+
+ + +
+

01. 404 — Not Found

+
+
404
+

Страница не найдена

+

Возможно, страница была перемещена или удалена. Проверьте URL или вернитесь на главную.

+
+ На главную + Назад +
+
+
+ + +
+

02. 500 — Server Error

+
+
500
+

Ошибка сервера

+

Что-то пошло не так на нашей стороне. Мы уже работаем над исправлением.

+
+
+ Статус: Работаем над проблемой +
+
+ + Статус сервисов +
+
+
+ + +
+

03. 403 — Forbidden

+
+
+ + + +
+
403
+

Доступ запрещён

+

У вас нет прав для просмотра этой страницы. Обратитесь к администратору.

+
+ Запросить доступ +
+
+
+ + +
+

04. Maintenance

+
+
+
⚙
+
⚙
+
+

Технические работы

+

Мы обновляем систему для улучшения работы. Ожидаемое время завершения:

+
+
+ 01 + час +
+ : +
+ 24 + мин +
+ : +
+ 35 + сек +
+
+
+ Подписаться на обновления +
+
+
+ + +
+

05. Offline

+
+
+ + + +
+

Нет подключения

+

Проверьте интернет-соединение и попробуйте снова

+
+ +
+
+
+ + +
+

06. Session Expired

+
+
+ + + +
+

Сессия истекла

+

Ваша сессия истекла по причине бездействия. Войдите снова для продолжения.

+
+ +
+
+
+ + +
+

07. Inline Error (Compact)

+
+ + + + Произошла ошибка при загрузке данных + +
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/favorites.css b/skills/documatica-v12-design-system/references/favorites.css new file mode 100644 index 00000000..f918a0e7 --- /dev/null +++ b/skills/documatica-v12-design-system/references/favorites.css @@ -0,0 +1,750 @@ +/** + * UI Kit v12.0 — Favorites + * Wishlist, bookmarks, saved items + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--sm { + padding: 10px 18px; + font-size: 12px; +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +/* ========================================================================= + FAVORITES HEADER + ========================================================================= */ + +.favorites-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px 28px; + background: var(--color-white); + border-radius: 20px; + margin-bottom: 24px; +} + +.favorites-header__info { + display: flex; + align-items: baseline; + gap: 12px; +} + +.favorites-header__count { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); +} + +.favorites-header__label { + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; +} + +.favorites-header__actions { + display: flex; + gap: 12px; +} + +/* ========================================================================= + FAVORITES GRID + ========================================================================= */ + +.favorites-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} + +.fav-card { + position: relative; + background: var(--color-white); + border-radius: 24px; + overflow: hidden; + transition: all 0.3s ease; +} + +.fav-card:hover { + transform: translateY(-6px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +.fav-card--unavailable { + opacity: 0.7; +} + +.fav-card__remove { + position: absolute; + top: 12px; + right: 12px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: none; + border-radius: 50%; + color: var(--color-slate-400); + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + z-index: 2; + transition: all 0.2s ease; +} + +.fav-card__remove:hover { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.fav-card__badge { + position: absolute; + top: 12px; + left: 12px; + padding: 6px 12px; + background: #dc2626; + border-radius: 8px; + font-size: 11px; + font-weight: 700; + color: var(--color-white); + letter-spacing: 0.05em; + z-index: 2; +} + +.fav-card__badge--new { + background: var(--color-dark); +} + +.fav-card__image { + aspect-ratio: 1; + background: var(--color-slate-50); + overflow: hidden; +} + +.fav-card__image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s ease; +} + +.fav-card:hover .fav-card__image img { + transform: scale(1.05); +} + +.fav-card__body { + padding: 20px; +} + +.fav-card__category { + display: block; + font-size: 10px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.15em; + margin-bottom: 6px; +} + +.fav-card__title { + font-size: 15px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; + line-height: 1.3; +} + +.fav-card__prices { + display: flex; + align-items: center; + gap: 10px; +} + +.fav-card__price { + font-size: 18px; + font-weight: 900; + color: var(--color-dark); +} + +.fav-card__old-price { + font-size: 14px; + color: var(--color-slate-400); + text-decoration: line-through; +} + +.fav-card__status { + display: block; + margin-top: 8px; + font-size: 12px; + font-weight: 600; +} + +.fav-card__status--success { + color: var(--color-success); +} + +.fav-card__status--warning { + color: #d97706; +} + +.fav-card__status--danger { + color: #dc2626; +} + +.fav-card__cart, +.fav-card__notify { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + padding: 14px; + background: var(--color-primary); + border: none; + color: var(--color-white); + font-family: inherit; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: background 0.2s ease; +} + +.fav-card__cart:hover { + background: #2563eb; +} + +.fav-card__notify { + background: var(--color-slate-100); + color: var(--color-dark); +} + +.fav-card__notify:hover { + background: var(--color-slate-200); +} + +/* ========================================================================= + WISHLIST COMPACT + ========================================================================= */ + +.wishlist-compact { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; +} + +.wish-item { + display: flex; + align-items: center; + gap: 20px; + padding: 20px 24px; + border-bottom: 1px solid var(--color-slate-100); +} + +.wish-item:last-child { + border-bottom: none; +} + +.wish-item__image { + width: 64px; + height: 64px; + border-radius: 14px; + overflow: hidden; + background: var(--color-slate-100); + flex-shrink: 0; +} + +.wish-item__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wish-item__info { + flex: 1; + min-width: 0; +} + +.wish-item__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.wish-item__meta { + font-size: 13px; + color: var(--color-slate-400); +} + +.wish-item__price { + font-size: 18px; + font-weight: 900; + color: var(--color-dark); +} + +.wish-item__actions { + display: flex; + gap: 8px; +} + +.wish-item__btn { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.wish-item__btn--cart:hover { + background: var(--color-primary); + color: var(--color-white); +} + +.wish-item__btn--remove:hover { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +/* ========================================================================= + COLLECTIONS + ========================================================================= */ + +.collections-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.collection-card { + display: flex; + align-items: center; + gap: 20px; + padding: 20px; + background: var(--color-white); + border-radius: 20px; + cursor: pointer; + transition: all 0.2s ease; +} + +.collection-card:hover { + transform: translateY(-4px); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); +} + +.collection-card__images { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4px; + width: 80px; + flex-shrink: 0; +} + +.collection-card__images img { + width: 38px; + height: 38px; + border-radius: 10px; + object-fit: cover; +} + +.collection-card__more { + display: flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + background: var(--color-slate-100); + border-radius: 10px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-500); +} + +.collection-card__body { + flex: 1; +} + +.collection-card__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.collection-card__count { + font-size: 13px; + color: var(--color-slate-400); +} + +.collection-card__btn { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + font-size: 18px; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.collection-card:hover .collection-card__btn { + background: var(--color-primary); + color: var(--color-white); +} + +.collection-card--add { + border: 2px dashed var(--color-slate-200); + background: transparent; + flex-direction: column; + justify-content: center; + padding: 40px; +} + +.collection-card--add:hover { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.05); +} + +.collection-card__add-icon { + display: flex; + align-items: center; + justify-content: center; + width: 52px; + height: 52px; + background: var(--color-slate-100); + border-radius: 14px; + color: var(--color-slate-400); + margin-bottom: 12px; +} + +.collection-card--add:hover .collection-card__add-icon { + background: var(--color-primary); + color: var(--color-white); +} + +.collection-card__add-text { + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +/* ========================================================================= + HEART BUTTONS + ========================================================================= */ + +.hearts-demo { + display: flex; + align-items: center; + gap: 20px; + padding: 40px; + background: var(--color-white); + border-radius: 24px; + justify-content: center; +} + +.heart-btn { + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.heart-btn:hover { + color: #dc2626; + transform: scale(1.1); +} + +.heart-btn--active { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.heart-btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.heart-btn--outline:hover { + border-color: #dc2626; +} + +.heart-btn--lg { + width: 64px; + height: 64px; + border-radius: 18px; +} + +/* ========================================================================= + EMPTY STATE + ========================================================================= */ + +.empty-favorites { + text-align: center; + padding: 80px 40px; + background: var(--color-white); + border-radius: 28px; +} + +.empty-favorites__icon { + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 120px; + margin: 0 auto 32px; + background: rgba(220, 38, 38, 0.1); + border-radius: 50%; + color: #dc2626; +} + +.empty-favorites__title { + font-size: 32px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 12px 0; + text-transform: uppercase; +} + +.empty-favorites__title span { + color: var(--color-primary); +} + +.empty-favorites__text { + font-size: 16px; + color: var(--color-slate-500); + margin: 0 0 32px 0; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .favorites-grid { + grid-template-columns: repeat(3, 1fr); + } + + .collections-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .favorites-header { + flex-direction: column; + gap: 20px; + } + + .favorites-grid { + grid-template-columns: repeat(2, 1fr); + } + + .collections-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .favorites-grid { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/favorites.html b/skills/documatica-v12-design-system/references/favorites.html new file mode 100644 index 00000000..67c7ba5e --- /dev/null +++ b/skills/documatica-v12-design-system/references/favorites.html @@ -0,0 +1,366 @@ + + + + + + Favorites — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● WISHLIST +

FAVO
RITES

+

Списки желаний, избранное, закладки и сохранённые элементы.

+
+ + +
+
+ 01 +

FAVORITES GRID

+
+ +
+
+ 12 + ТОВАРОВ В ИЗБРАННОМ +
+
+ + +
+
+ +
+
+ +
+ Product +
+
+ АКСЕССУАРЫ +

Smart Watch Series X

+
24 990 ₽
+ ● В наличии +
+ +
+ +
+ +
-30%
+
+ Product +
+
+ AUDIO +

Headphones Pro Max

+
+ 24 490 ₽ + 34 990 ₽ +
+ ● В наличии +
+ +
+ +
+ +
+ Product +
+
+ ОБУВЬ +

Running Pro Max

+
16 990 ₽
+ ● Нет в наличии +
+ +
+ +
+ +
● NEW
+
+ Product +
+
+ УХОД +

Premium Skincare Set

+
8 490 ₽
+ ● Осталось 3 шт +
+ +
+
+
+ + +
+
+ 02 +

COMPACT LIST

+
+ +
+
+
+ +
+
+

Smart Watch Series X

+ Добавлено 3 дня назад +
+
24 990 ₽
+
+ + +
+
+
+
+ +
+
+

Headphones Pro Max

+ Добавлено неделю назад +
+
34 990 ₽
+
+ + +
+
+
+
+ + +
+
+ 03 +

COLLECTIONS

+
+ +
+
+
+ + + + +5 +
+
+

Для работы

+ 8 товаров +
+ +
+ +
+
+ + +
+
+

Подарки

+ 2 товара +
+ +
+ +
+
+ + + +
+ Новая коллекция +
+
+
+ + +
+
+ 04 +

HEART BUTTONS

+
+ +
+ + + + + + + + + +
+
+ + +
+
+ 05 +

EMPTY STATE

+
+ +
+
+ + + +
+

ИЗБРАННОЕ ПУСТО

+

Добавляйте товары в избранное, нажимая на ♡

+ Перейти в каталог +
+
+ + +
+
+ 06 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Кнопка сердечко -->
+<button class="heart-btn">♡</button>
+<button class="heart-btn heart-btn--active">♥</button>
+
+<!-- Карточка избранного -->
+<div class="fav-card">
+  <button class="fav-card__remove">×</button>
+  <div class="fav-card__image">...</div>
+  <div class="fav-card__body">
+    <span class="fav-card__status fav-card__status--success">● В наличии</span>
+  </div>
+  <button class="fav-card__cart">В корзину</button>
+</div>
+
+/* Модификаторы */
+.fav-card--unavailable    /* Недоступен */
+.fav-card__status--success
+.fav-card__status--warning
+.fav-card__status--danger
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/file-upload.css b/skills/documatica-v12-design-system/references/file-upload.css new file mode 100644 index 00000000..d6755a15 --- /dev/null +++ b/skills/documatica-v12-design-system/references/file-upload.css @@ -0,0 +1,574 @@ +/** + * Documatica Design System v12.0 + * File Upload Components + */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + DROPZONE + ========================================================================= */ + +.dropzone { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--spacing-12); + background: var(--color-white); + border: 2px dashed var(--color-slate-300); + border-radius: var(--radius-2xl); + text-align: center; + cursor: pointer; + transition: var(--transition-base); +} + +.dropzone:hover { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.02); +} + +.dropzone__input { + position: absolute; + inset: 0; + opacity: 0; + cursor: pointer; +} + +.dropzone__icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-4); + background: var(--color-slate-100); + border-radius: var(--radius-xl); + color: var(--color-slate-400); +} + +.dropzone__icon svg { + width: 32px; + height: 32px; +} + +.dropzone__icon--sm { + width: 48px; + height: 48px; +} + +.dropzone__icon--sm svg { + width: 24px; + height: 24px; +} + +.dropzone__title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin: 0 0 var(--spacing-2); +} + +.dropzone__text { + font-size: var(--font-size-base); + color: var(--color-slate-500); + margin: 0 0 var(--spacing-3); +} + +.dropzone__link { + color: var(--color-primary); + font-weight: var(--font-weight-medium); + text-decoration: underline; +} + +.dropzone__hint { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + margin: 0; +} + +/* Compact */ +.dropzone--compact { + flex-direction: row; + padding: var(--spacing-5); + gap: var(--spacing-4); +} + +.dropzone--compact .dropzone__icon { + margin: 0; +} + +.dropzone--compact .dropzone__content { + flex: 1; + text-align: left; +} + +.dropzone--compact .dropzone__title { + margin: 0; + font-size: var(--font-size-base); +} + +.dropzone--compact .dropzone__hint { + margin: 0; +} + +.dropzone__btn { + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); + position: relative; + z-index: 2; +} + +.dropzone__btn:hover { + background: rgba(59, 130, 246, 0.2); +} + +/* Preview */ +.dropzone--preview { + padding: var(--spacing-4); +} + +.dropzone__preview-area { + position: relative; + width: 100%; + max-width: 300px; + aspect-ratio: 4/3; + border-radius: var(--radius-xl); + overflow: hidden; + margin-bottom: var(--spacing-4); +} + +.dropzone__preview-area img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.dropzone__remove { + position: absolute; + top: var(--spacing-2); + right: var(--spacing-2); + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.6); + border: none; + border-radius: var(--radius-full); + color: white; + cursor: pointer; + transition: var(--transition-base); +} + +.dropzone__remove:hover { + background: var(--color-danger); +} + +.dropzone__remove svg { + width: 16px; + height: 16px; +} + +.dropzone__info { + display: flex; + gap: var(--spacing-3); + align-items: center; +} + +.dropzone__filename { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.dropzone__filesize { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* States */ +.states-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-4); +} + +.dropzone--sm { + padding: var(--spacing-6); +} + +.dropzone--hover { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.05); +} + +.dropzone--hover .dropzone__icon { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.dropzone--success { + border-color: var(--color-success); + border-style: solid; + background: rgba(16, 185, 129, 0.05); +} + +.dropzone--success .dropzone__icon { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.dropzone--error { + border-color: var(--color-danger); + border-style: solid; + background: rgba(220, 38, 38, 0.05); +} + +.dropzone--error .dropzone__icon { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +.dropzone--disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +/* ========================================================================= + FILE LIST + ========================================================================= */ + +.file-list { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.file-item { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.file-item:hover { + border-color: var(--color-slate-300); + box-shadow: var(--shadow-sm); +} + +.file-item--error { + border-color: rgba(220, 38, 38, 0.3); + background: rgba(220, 38, 38, 0.02); +} + +.file-item__icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + flex-shrink: 0; +} + +.file-item__icon svg { + width: 22px; + height: 22px; +} + +.file-item__icon--pdf { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +.file-item__icon--doc { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.file-item__icon--img { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.file-item__info { + flex: 1; + min-width: 0; +} + +.file-item__name { + display: block; + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.file-item__meta { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.file-item__meta--error { + color: var(--color-danger); +} + +.file-item__progress { + width: 100px; + height: 4px; + background: var(--color-slate-200); + border-radius: var(--radius-full); + overflow: hidden; +} + +.file-item__progress-bar { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + transition: width 0.3s ease; +} + +.file-item__status { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.file-item__status svg { + width: 18px; + height: 18px; +} + +.file-item__status--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.file-item__status--error { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +.file-item__action { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); + flex-shrink: 0; +} + +.file-item__action svg { + width: 18px; + height: 18px; +} + +.file-item__action:hover { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +/* ========================================================================= + SMART UPLOAD + ========================================================================= */ + +.dropzone--smart { + background: var(--color-dark); + border: 2px solid var(--color-slate-700); + overflow: hidden; +} + +.dropzone--smart:hover { + border-color: var(--color-smart); +} + +.dropzone__glow { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 50%); + animation: glow-rotate 10s linear infinite; + pointer-events: none; +} + +@keyframes glow-rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.dropzone__icon--smart { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.dropzone--smart .dropzone__title { + color: var(--color-white); +} + +.dropzone--smart .dropzone__text { + color: var(--color-slate-400); +} + +.dropzone__features { + display: flex; + gap: var(--spacing-4); + margin-top: var(--spacing-6); + flex-wrap: wrap; + justify-content: center; +} + +.dropzone__feature { + display: flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.dropzone__feature svg { + width: 16px; + height: 16px; + color: var(--color-smart); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .states-grid { + grid-template-columns: repeat(2, 1fr); + } + + .dropzone__features { + flex-direction: column; + align-items: center; + } +} diff --git a/skills/documatica-v12-design-system/references/file-upload.html b/skills/documatica-v12-design-system/references/file-upload.html new file mode 100644 index 00000000..72d44efc --- /dev/null +++ b/skills/documatica-v12-design-system/references/file-upload.html @@ -0,0 +1,237 @@ + + + + + + File Upload — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Upload Protocol v12.0 +
+

+ File Upload +

+
+ + +
+

01. Basic Dropzone

+
+
+ + + +
+

Перетащите файлы сюда

+

или выберите файл на компьютере

+

PDF, DOCX, XLSX до 25 МБ

+ +
+
+ + +
+

02. Compact

+
+
+ + + +
+
+

Загрузить документ

+

PNG, JPG, PDF до 10 МБ

+
+ + +
+
+ + +
+

03. With Image Preview

+
+
+ Preview + +
+
+ financial-report-2024.jpg + 2.4 МБ +
+
+
+ + +
+

04. File List

+
+
+
+ + + +
+
+ Договор_аренды_2024.pdf + PDF • 1.2 МБ • Загружен +
+ + + + + + +
+ +
+
+ + + +
+
+ Счёт-фактура_Q4.docx + DOCX • 856 КБ • Загрузка 67% +
+
+
+
+ +
+ +
+
+ + + +
+
+ scan_corrupted.png + Ошибка: файл повреждён +
+ + + + + + +
+
+
+ + +
+

05. States

+
+
+
+ + + +
+

Hover / Drag

+
+
+
+ + + +
+

Успешно

+
+
+
+ + + +
+

Ошибка

+
+
+
+ + + +
+

Disabled

+
+
+
+ + +
+

06. AI Smart Upload

+
+
+
+ + + +
+

Smart Upload

+

AI автоматически определит тип документа и заполнит метаданные

+
+ + + + + OCR распознавание + + + + + + Автоклассификация + + + + + + Извлечение данных + +
+ +
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/footer.css b/skills/documatica-v12-design-system/references/footer.css new file mode 100644 index 00000000..8fcc9b05 --- /dev/null +++ b/skills/documatica-v12-design-system/references/footer.css @@ -0,0 +1,653 @@ +/** + * Documatica Design System v12.0 + * Footer Components + */ + +.container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + SITE FOOTER BASE + ========================================================================= */ + +.site-footer { + padding: var(--spacing-10); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +/* ========================================================================= + SIMPLE FOOTER + ========================================================================= */ + +.site-footer--simple { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-4); +} + +.site-footer__copyright { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.site-footer__copyright--sm { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +.site-footer__links { + display: flex; + gap: var(--spacing-6); +} + +.site-footer__links a { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-decoration: none; + transition: var(--transition-base); +} + +.site-footer__links a:hover { + color: var(--color-primary); +} + +/* ========================================================================= + MULTI-COLUMN FOOTER + ========================================================================= */ + +.site-footer--columns { + display: grid; + grid-template-columns: 2fr repeat(4, 1fr); + gap: var(--spacing-10); +} + +.site-footer__brand { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.site-footer__logo { + display: flex; + align-items: center; + gap: var(--spacing-3); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.site-footer__logo svg { + width: 32px; + height: 32px; + color: var(--color-primary); +} + +.site-footer__logo--sm svg { + width: 24px; + height: 24px; +} + +.site-footer__logo--lg { + font-size: var(--font-size-2xl); +} + +.site-footer__logo--lg svg { + width: 40px; + height: 40px; +} + +.site-footer__tagline { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + margin: 0; +} + +.site-footer__social { + display: flex; + gap: var(--spacing-2); +} + +.social-link { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + color: var(--color-slate-500); + background: var(--color-slate-100); + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.social-link svg { + width: 18px; + height: 18px; +} + +.social-link:hover { + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); +} + +.social-link--dark { + background: var(--color-slate-800); + color: var(--color-slate-400); +} + +.social-link--dark:hover { + color: var(--color-white); + background: var(--color-primary); +} + +.site-footer__column { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.site-footer__heading { + margin: 0; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.site-footer__nav { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.site-footer__nav a { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-decoration: none; + transition: var(--transition-base); +} + +.site-footer__nav a:hover { + color: var(--color-primary); +} + +.nav-badge { + display: inline-flex; + padding: 2px 6px; + font-size: 10px; + font-weight: var(--font-weight-bold); + color: var(--color-success); + background: rgba(16, 185, 129, 0.1); + border-radius: var(--radius-full); + margin-left: var(--spacing-2); + text-transform: uppercase; +} + +/* ========================================================================= + DARK FOOTER + ========================================================================= */ + +.site-footer--dark { + background: var(--color-dark); + border-color: var(--color-slate-800); +} + +.site-footer--dark .site-footer__logo { + color: var(--color-white); +} + +.site-footer--dark .site-footer__copyright { + color: var(--color-slate-500); +} + +.site-footer__top { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: var(--spacing-8); + border-bottom: 1px solid var(--color-slate-800); + margin-bottom: var(--spacing-8); +} + +.site-footer__newsletter p { + margin: 0 0 var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.newsletter-form { + display: flex; + gap: var(--spacing-2); +} + +.newsletter-form input { + padding: var(--spacing-3) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + color: var(--color-white); + background: var(--color-slate-800); + border: 1px solid var(--color-slate-700); + border-radius: var(--radius-lg); + outline: none; + transition: var(--transition-base); +} + +.newsletter-form input::placeholder { + color: var(--color-slate-500); +} + +.newsletter-form input:focus { + border-color: var(--color-primary); +} + +.newsletter-form button { + padding: var(--spacing-3) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.newsletter-form button:hover { + background: #2563eb; +} + +.site-footer__middle { + padding-bottom: var(--spacing-8); + border-bottom: 1px solid var(--color-slate-800); + margin-bottom: var(--spacing-8); +} + +.site-footer__inline-nav { + display: flex; + justify-content: center; + gap: var(--spacing-8); + flex-wrap: wrap; +} + +.site-footer__inline-nav a { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + text-decoration: none; + transition: var(--transition-base); +} + +.site-footer__inline-nav a:hover { + color: var(--color-white); +} + +.site-footer__inline-nav--sm { + gap: var(--spacing-6); +} + +.site-footer__inline-nav--sm a { + font-size: var(--font-size-xs); +} + +.site-footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; +} + +/* ========================================================================= + CTA FOOTER + ========================================================================= */ + +.site-footer--cta { + text-align: center; + background: linear-gradient(135deg, #dbeafe 0%, #fef3c7 100%); + border: none; +} + +.site-footer__cta-block { + margin-bottom: var(--spacing-10); +} + +.site-footer__cta-block h3 { + margin: 0 0 var(--spacing-2); + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.site-footer__cta-block p { + margin: 0 0 var(--spacing-6); + font-size: var(--font-size-base); + color: var(--color-slate-600); +} + +.site-footer__cta-btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-4) var(--spacing-8); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border: none; + border-radius: var(--radius-massive); + cursor: pointer; + transition: var(--transition-spring); +} + +.site-footer__cta-btn svg { + width: 20px; + height: 20px; +} + +.site-footer__cta-btn:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.site-footer__info { + display: flex; + justify-content: center; + align-items: center; + gap: var(--spacing-4); + padding-top: var(--spacing-8); + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.site-footer__info p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.site-footer__info nav { + display: flex; + gap: var(--spacing-4); +} + +.site-footer__info nav a { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-decoration: none; +} + +.site-footer__info nav a:hover { + color: var(--color-primary); +} + +/* ========================================================================= + MINIMAL FOOTER + ========================================================================= */ + +.site-footer--minimal { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-6); + padding: var(--spacing-6); +} + +/* ========================================================================= + MEGA FOOTER + ========================================================================= */ + +.site-footer--mega { + padding: var(--spacing-12); + background: var(--color-slate-50); + border: none; +} + +.mega-footer__top { + display: grid; + grid-template-columns: 1fr 2fr; + gap: var(--spacing-12); + padding-bottom: var(--spacing-10); + border-bottom: 1px solid var(--color-slate-200); + margin-bottom: var(--spacing-8); +} + +.mega-footer__brand { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.mega-footer__desc { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +.mega-footer__badges { + display: flex; + gap: var(--spacing-2); + flex-wrap: wrap; +} + +.mega-badge { + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-md); +} + +.mega-footer__columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-8); +} + +.mega-footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; +} + +.mega-footer__legal { + display: flex; + align-items: center; + gap: var(--spacing-6); +} + +.mega-footer__legal p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.mega-footer__legal nav { + display: flex; + gap: var(--spacing-4); +} + +.mega-footer__legal nav a { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-decoration: none; +} + +.mega-footer__legal nav a:hover { + color: var(--color-primary); +} + +.locale-btn { + display: flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.locale-btn svg { + width: 18px; + height: 18px; +} + +.locale-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .site-footer--simple { + flex-direction: column; + text-align: center; + } + + .site-footer--columns { + grid-template-columns: 1fr 1fr; + } + + .site-footer__brand { + grid-column: 1 / -1; + } + + .site-footer__top { + flex-direction: column; + gap: var(--spacing-6); + } + + .site-footer__bottom { + flex-direction: column; + gap: var(--spacing-4); + } + + .mega-footer__top { + grid-template-columns: 1fr; + } + + .mega-footer__columns { + grid-template-columns: 1fr 1fr; + } + + .mega-footer__bottom { + flex-direction: column; + gap: var(--spacing-4); + text-align: center; + } + + .mega-footer__legal { + flex-direction: column; + gap: var(--spacing-3); + } +} diff --git a/skills/documatica-v12-design-system/references/footer.html b/skills/documatica-v12-design-system/references/footer.html new file mode 100644 index 00000000..1595a74a --- /dev/null +++ b/skills/documatica-v12-design-system/references/footer.html @@ -0,0 +1,292 @@ + + + + + + Footer — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Footer Protocol v12.0 +
+

+ Footer +

+
+ + +
+

01. Simple Footer

+ +
+ + +
+

02. Multi-Column Footer

+ +
+ + +
+

03. Dark Footer

+ +
+ + +
+

04. Footer with CTA

+ +
+ + +
+

05. Minimal Footer

+ +
+ + +
+

06. Mega Footer

+ +
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/gallery.css b/skills/documatica-v12-design-system/references/gallery.css new file mode 100644 index 00000000..9c5b7e34 --- /dev/null +++ b/skills/documatica-v12-design-system/references/gallery.css @@ -0,0 +1,583 @@ +/** + * Documatica Design System v12.0 + * Gallery Components + */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + GALLERY GRID + ========================================================================= */ + +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); +} + +.gallery-grid--4 { + grid-template-columns: repeat(4, 1fr); +} + +.gallery-grid--3 { + grid-template-columns: repeat(3, 1fr); +} + +/* ========================================================================= + GALLERY ITEM + ========================================================================= */ + +.gallery-item { + position: relative; + aspect-ratio: 1; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; + cursor: pointer; + transition: var(--transition-spring); +} + +.gallery-item:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.gallery-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 48px; + background: linear-gradient(135deg, var(--color-slate-100), var(--color-slate-50)); +} + +.gallery-placeholder--lg { + font-size: 64px; +} + +.gallery-placeholder--sm { + font-size: 24px; +} + +/* ========================================================================= + MASONRY + ========================================================================= */ + +.gallery-masonry { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + gap: var(--spacing-4); +} + +.gallery-item--tall { + grid-row: span 2; +} + +.gallery-item--wide { + grid-column: span 2; +} + +/* ========================================================================= + OVERLAY + ========================================================================= */ + +.gallery-item--overlay { + overflow: hidden; +} + +.gallery-overlay { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: var(--spacing-4); + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + opacity: 0; + transition: var(--transition-base); +} + +.gallery-item--overlay:hover .gallery-overlay { + opacity: 1; +} + +.gallery-title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); +} + +.gallery-meta { + font-size: var(--font-size-xs); + color: var(--color-slate-300); +} + +/* ========================================================================= + SELECTABLE + ========================================================================= */ + +.gallery-item--selectable { + border-width: 2px; +} + +.gallery-checkbox { + position: absolute; + top: var(--spacing-3); + right: var(--spacing-3); + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-md); + opacity: 0; + transition: var(--transition-base); +} + +.gallery-item--selectable:hover .gallery-checkbox { + opacity: 1; +} + +.gallery-checkbox svg { + width: 14px; + height: 14px; + color: var(--color-white); + opacity: 0; +} + +.gallery-checkbox--checked { + opacity: 1; + background: var(--color-primary); + border-color: var(--color-primary); +} + +.gallery-checkbox--checked svg { + opacity: 1; +} + +.gallery-item--selected { + border-color: var(--color-primary); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); +} + +.gallery-selection-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-primary); + border-radius: var(--radius-xl); + color: var(--color-white); +} + +.selection-actions { + display: flex; + gap: var(--spacing-2); +} + +.selection-btn { + display: flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: rgba(255, 255, 255, 0.2); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.selection-btn:hover { + background: rgba(255, 255, 255, 0.3); +} + +.selection-btn svg { + width: 18px; + height: 18px; +} + +.selection-btn--danger { + background: var(--color-danger); +} + +.selection-btn--danger:hover { + background: #b91c1c; +} + +/* ========================================================================= + LIGHTBOX PREVIEW + ========================================================================= */ + +.lightbox-preview { + position: relative; + height: 400px; + border-radius: var(--radius-2xl); + overflow: hidden; +} + +.lightbox-backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.9); +} + +.lightbox-content { + position: relative; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.lightbox-close { + position: absolute; + top: var(--spacing-4); + right: var(--spacing-4); + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: var(--radius-full); + color: var(--color-white); + cursor: pointer; + transition: var(--transition-base); +} + +.lightbox-close:hover { + background: rgba(255, 255, 255, 0.2); +} + +.lightbox-close svg { + width: 24px; + height: 24px; +} + +.lightbox-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: var(--radius-full); + color: var(--color-white); + cursor: pointer; + transition: var(--transition-base); +} + +.lightbox-nav:hover { + background: rgba(255, 255, 255, 0.2); +} + +.lightbox-nav svg { + width: 24px; + height: 24px; +} + +.lightbox-nav--prev { + left: var(--spacing-4); +} + +.lightbox-nav--next { + right: var(--spacing-4); +} + +.lightbox-image { + max-width: 70%; + max-height: 70%; +} + +.lightbox-image .gallery-placeholder--lg { + width: 300px; + height: 200px; + background: var(--color-white); + border-radius: var(--radius-xl); +} + +.lightbox-info { + position: absolute; + bottom: var(--spacing-4); + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.lightbox-title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-white); +} + +.lightbox-counter { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + CAROUSEL + ========================================================================= */ + +.gallery-carousel { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.carousel-main { + aspect-ratio: 16/9; + background: var(--color-slate-100); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.carousel-main .gallery-placeholder--lg { + font-size: 80px; +} + +.carousel-thumbs { + display: flex; + gap: var(--spacing-3); + justify-content: center; +} + +.carousel-thumb { + width: 80px; + height: 60px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: var(--radius-lg); + overflow: hidden; + cursor: pointer; + transition: var(--transition-base); +} + +.carousel-thumb:hover { + border-color: var(--color-slate-300); +} + +.carousel-thumb--active { + border-color: var(--color-primary); +} + +/* ========================================================================= + DOCUMENT CARDS + ========================================================================= */ + +.doc-card { + display: flex; + flex-direction: column; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; + transition: var(--transition-spring); +} + +.doc-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.doc-card__preview { + aspect-ratio: 4/3; + background: var(--color-slate-100); +} + +.doc-card__info { + padding: var(--spacing-4); +} + +.doc-card__info h4 { + margin: 0 0 var(--spacing-1); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.doc-card__info p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.doc-card__actions { + display: flex; + gap: var(--spacing-1); + padding: var(--spacing-3) var(--spacing-4); + border-top: 1px solid var(--color-slate-100); +} + +.doc-action { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.doc-action:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.doc-action svg { + width: 20px; + height: 20px; +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .gallery-grid { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-grid--4 { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-grid--3 { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-masonry { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-item--wide { + grid-column: span 1; + } + + .carousel-thumbs { + flex-wrap: wrap; + } +} diff --git a/skills/documatica-v12-design-system/references/gallery.html b/skills/documatica-v12-design-system/references/gallery.html new file mode 100644 index 00000000..0d163203 --- /dev/null +++ b/skills/documatica-v12-design-system/references/gallery.html @@ -0,0 +1,324 @@ + + + + + + Gallery — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Gallery Protocol v12.0 +
+

+ Gallery +

+
+ + +
+

01. Basic Grid

+
+
+
📄
+
+
+
📊
+
+
+
📈
+
+
+
📑
+
+
+
📋
+
+
+
📁
+
+
+
+ + +
+

02. Masonry Layout

+
+
+
📄 Document
+
+
+
📊
+
+
+
📈
+
+
+
📑 Report
+
+
+
📋 Form
+
+
+
📁
+
+
+
+ + +
+

03. With Hover Overlay

+
+
+
📄
+
+ Документ.pdf + 2.4 MB +
+
+
+
📊
+
+ Отчёт.xlsx + 1.2 MB +
+
+
+
📈
+
+ Аналитика.pptx + 5.8 MB +
+
+
+
📑
+
+ Договор.docx + 890 KB +
+
+
+
+ + +
+

04. Selectable Gallery

+
+
+
📄
+
+ + + +
+
+
+
📊
+
+ + + +
+
+
+
📈
+
+ + + +
+
+
+
📑
+
+ + + +
+
+
+
+ Выбрано: 2 файла +
+ + +
+
+
+ + +
+

05. Lightbox (Static Preview)

+
+
+
+ + +
+
📄 Preview
+
+ +
+ Документ.pdf + 3 / 12 +
+
+
+
+ + +
+

06. Image Carousel

+
+
+
📄 Main Image
+
+
+
+
📄
+
+
+
📊
+
+
+
📈
+
+
+
📑
+
+
+
+
+ + +
+

07. Document Preview Cards

+
+
+
+
📄
+
+
+

Договор аренды.pdf

+

Изменён: 2 часа назад

+
+
+ + + +
+
+
+
+
📊
+
+
+

Отчёт Q4.xlsx

+

Изменён: Вчера

+
+
+ + + +
+
+
+
+
📈
+
+
+

Презентация.pptx

+

Изменён: 3 дня назад

+
+
+ + + +
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/grid.css b/skills/documatica-v12-design-system/references/grid.css new file mode 100644 index 00000000..ba4bd526 --- /dev/null +++ b/skills/documatica-v12-design-system/references/grid.css @@ -0,0 +1,451 @@ +/** + * Documatica Design System v12.0 + * Grid System + */ + +/* ========================================================================= + DOCS CONTAINER + ========================================================================= */ + +.docs-container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.section__desc { + font-size: var(--font-size-sm); + color: var(--color-slate-500); + margin-bottom: var(--spacing-3); + margin-top: var(--spacing-6); +} + +.section__desc:first-of-type { + margin-top: 0; +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + GRID DEMO STYLES + ========================================================================= */ + +.grid-demo { + margin-bottom: var(--spacing-4); +} + +.grid-demo .row > div { + background: var(--color-primary); + border-radius: var(--radius-lg); + min-height: 48px; + display: flex; + align-items: center; + justify-content: center; +} + +.grid-demo .row > div span { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + text-transform: uppercase; +} + +.grid-demo .nested { + margin-top: var(--spacing-3); +} + +.grid-demo .nested > div { + background: rgba(255, 255, 255, 0.3); +} + +.nested-label { + display: block; + padding: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + text-transform: uppercase; +} + +/* ========================================================================= + ROW + ========================================================================= */ + +.row { + display: flex; + flex-wrap: wrap; + margin-left: -8px; + margin-right: -8px; +} + +.row > * { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 16px; +} + +/* Gap variants */ +.gap-0 { + margin-left: 0; + margin-right: 0; +} + +.gap-0 > * { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; +} + +.gap-sm { + margin-left: -4px; + margin-right: -4px; +} + +.gap-sm > * { + padding-left: 4px; + padding-right: 4px; + margin-bottom: 8px; +} + +.gap-md { + margin-left: -8px; + margin-right: -8px; +} + +.gap-md > * { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 16px; +} + +.gap-lg { + margin-left: -12px; + margin-right: -12px; +} + +.gap-lg > * { + padding-left: 12px; + padding-right: 12px; + margin-bottom: 24px; +} + +.gap-xl { + margin-left: -16px; + margin-right: -16px; +} + +.gap-xl > * { + padding-left: 16px; + padding-right: 16px; + margin-bottom: 32px; +} + +/* ========================================================================= + COLUMNS + ========================================================================= */ + +.col { flex: 1 0 0%; } +.col-auto { flex: 0 0 auto; width: auto; } + +.col-1 { flex: 0 0 auto; width: 8.333333%; } +.col-2 { flex: 0 0 auto; width: 16.666667%; } +.col-3 { flex: 0 0 auto; width: 25%; } +.col-4 { flex: 0 0 auto; width: 33.333333%; } +.col-5 { flex: 0 0 auto; width: 41.666667%; } +.col-6 { flex: 0 0 auto; width: 50%; } +.col-7 { flex: 0 0 auto; width: 58.333333%; } +.col-8 { flex: 0 0 auto; width: 66.666667%; } +.col-9 { flex: 0 0 auto; width: 75%; } +.col-10 { flex: 0 0 auto; width: 83.333333%; } +.col-11 { flex: 0 0 auto; width: 91.666667%; } +.col-12 { flex: 0 0 auto; width: 100%; } + +/* ========================================================================= + OFFSETS + ========================================================================= */ + +.offset-1 { margin-left: 8.333333%; } +.offset-2 { margin-left: 16.666667%; } +.offset-3 { margin-left: 25%; } +.offset-4 { margin-left: 33.333333%; } +.offset-5 { margin-left: 41.666667%; } +.offset-6 { margin-left: 50%; } +.offset-7 { margin-left: 58.333333%; } +.offset-8 { margin-left: 66.666667%; } +.offset-9 { margin-left: 75%; } +.offset-10 { margin-left: 83.333333%; } +.offset-11 { margin-left: 91.666667%; } + +/* ========================================================================= + ORDER + ========================================================================= */ + +.order-first { order: -1; } +.order-last { order: 13; } +.order-0 { order: 0; } +.order-1 { order: 1; } +.order-2 { order: 2; } +.order-3 { order: 3; } +.order-4 { order: 4; } +.order-5 { order: 5; } + +/* ========================================================================= + ALIGNMENT + ========================================================================= */ + +.align-items-start { align-items: flex-start; } +.align-items-center { align-items: center; } +.align-items-end { align-items: flex-end; } +.align-items-stretch { align-items: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-center { justify-content: center; } +.justify-end { justify-content: flex-end; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } +.justify-evenly { justify-content: space-evenly; } + +/* ========================================================================= + BREAKPOINTS TABLE + ========================================================================= */ + +.breakpoints-table { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.breakpoint-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + padding: var(--spacing-4) var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.breakpoint-row:last-child { + border-bottom: none; +} + +.breakpoint-row--header { + background: var(--color-slate-50); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.breakpoint-name { + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.breakpoint-class { + font-family: monospace; + font-size: var(--font-size-sm); + color: var(--color-primary); +} + +.breakpoint-value { + color: var(--color-slate-500); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: var(--radius-xl); + padding: var(--spacing-6); + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-300); + line-height: 1.6; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (min-width: 576px) { + .col-sm-1 { flex: 0 0 auto; width: 8.333333%; } + .col-sm-2 { flex: 0 0 auto; width: 16.666667%; } + .col-sm-3 { flex: 0 0 auto; width: 25%; } + .col-sm-4 { flex: 0 0 auto; width: 33.333333%; } + .col-sm-5 { flex: 0 0 auto; width: 41.666667%; } + .col-sm-6 { flex: 0 0 auto; width: 50%; } + .col-sm-7 { flex: 0 0 auto; width: 58.333333%; } + .col-sm-8 { flex: 0 0 auto; width: 66.666667%; } + .col-sm-9 { flex: 0 0 auto; width: 75%; } + .col-sm-10 { flex: 0 0 auto; width: 83.333333%; } + .col-sm-11 { flex: 0 0 auto; width: 91.666667%; } + .col-sm-12 { flex: 0 0 auto; width: 100%; } +} + +@media (min-width: 768px) { + .col-md-1 { flex: 0 0 auto; width: 8.333333%; } + .col-md-2 { flex: 0 0 auto; width: 16.666667%; } + .col-md-3 { flex: 0 0 auto; width: 25%; } + .col-md-4 { flex: 0 0 auto; width: 33.333333%; } + .col-md-5 { flex: 0 0 auto; width: 41.666667%; } + .col-md-6 { flex: 0 0 auto; width: 50%; } + .col-md-7 { flex: 0 0 auto; width: 58.333333%; } + .col-md-8 { flex: 0 0 auto; width: 66.666667%; } + .col-md-9 { flex: 0 0 auto; width: 75%; } + .col-md-10 { flex: 0 0 auto; width: 83.333333%; } + .col-md-11 { flex: 0 0 auto; width: 91.666667%; } + .col-md-12 { flex: 0 0 auto; width: 100%; } +} + +@media (min-width: 992px) { + .col-lg-1 { flex: 0 0 auto; width: 8.333333%; } + .col-lg-2 { flex: 0 0 auto; width: 16.666667%; } + .col-lg-3 { flex: 0 0 auto; width: 25%; } + .col-lg-4 { flex: 0 0 auto; width: 33.333333%; } + .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } + .col-lg-6 { flex: 0 0 auto; width: 50%; } + .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } + .col-lg-8 { flex: 0 0 auto; width: 66.666667%; } + .col-lg-9 { flex: 0 0 auto; width: 75%; } + .col-lg-10 { flex: 0 0 auto; width: 83.333333%; } + .col-lg-11 { flex: 0 0 auto; width: 91.666667%; } + .col-lg-12 { flex: 0 0 auto; width: 100%; } +} + +@media (min-width: 1200px) { + .col-xl-1 { flex: 0 0 auto; width: 8.333333%; } + .col-xl-2 { flex: 0 0 auto; width: 16.666667%; } + .col-xl-3 { flex: 0 0 auto; width: 25%; } + .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } + .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } + .col-xl-6 { flex: 0 0 auto; width: 50%; } + .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } + .col-xl-8 { flex: 0 0 auto; width: 66.666667%; } + .col-xl-9 { flex: 0 0 auto; width: 75%; } + .col-xl-10 { flex: 0 0 auto; width: 83.333333%; } + .col-xl-11 { flex: 0 0 auto; width: 91.666667%; } + .col-xl-12 { flex: 0 0 auto; width: 100%; } +} + +@media (min-width: 1400px) { + .col-xxl-1 { flex: 0 0 auto; width: 8.333333%; } + .col-xxl-2 { flex: 0 0 auto; width: 16.666667%; } + .col-xxl-3 { flex: 0 0 auto; width: 25%; } + .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; } + .col-xxl-5 { flex: 0 0 auto; width: 41.666667%; } + .col-xxl-6 { flex: 0 0 auto; width: 50%; } + .col-xxl-7 { flex: 0 0 auto; width: 58.333333%; } + .col-xxl-8 { flex: 0 0 auto; width: 66.666667%; } + .col-xxl-9 { flex: 0 0 auto; width: 75%; } + .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; } + .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; } + .col-xxl-12 { flex: 0 0 auto; width: 100%; } +} + +@media (max-width: 768px) { + .docs-container { + padding: var(--spacing-10) var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/grid.html b/skills/documatica-v12-design-system/references/grid.html new file mode 100644 index 00000000..00cd1b9b --- /dev/null +++ b/skills/documatica-v12-design-system/references/grid.html @@ -0,0 +1,321 @@ + + + + + + Grid System — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Grid System Protocol v12.0 +
+

+ Grid System +

+
+ + +
+

01. 12-Column Grid

+
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
col-6
+
col-6
+
+
+
col-4
+
col-4
+
col-4
+
+
+
col-3
+
col-3
+
col-3
+
col-3
+
+
+
col-8
+
col-4
+
+
+
col-2
+
col-8
+
col-2
+
+
+
+ + +
+

02. Responsive Breakpoints

+
+
+ Breakpoint + Class + Width +
+
+ xs + .col-xs-* + < 576px +
+
+ sm + .col-sm-* + ≥ 576px +
+
+ md + .col-md-* + ≥ 768px +
+
+ lg + .col-lg-* + ≥ 992px +
+
+ xl + .col-xl-* + ≥ 1200px +
+
+ xxl + .col-xxl-* + ≥ 1400px +
+
+
+ + +
+

03. Grid Gap Variants

+

gap-0 (no gap)

+
+
+
1
+
2
+
3
+
4
+
+
+

gap-sm (8px)

+
+
+
1
+
2
+
3
+
4
+
+
+

gap-md (16px) — default

+
+
+
1
+
2
+
3
+
4
+
+
+

gap-lg (24px)

+
+
+
1
+
2
+
3
+
4
+
+
+

gap-xl (32px)

+
+
+
1
+
2
+
3
+
4
+
+
+
+ + +
+

04. Vertical Alignment

+
+
+
align-start
+
align-start
+
align-start
+
+
+
+
+
align-center
+
align-center
+
align-center
+
+
+
+
+
align-end
+
align-end
+
align-end
+
+
+
+ + +
+

05. Horizontal Alignment

+
+
+
start
+
start
+
+
+
+
+
center
+
center
+
+
+
+
+
end
+
end
+
+
+
+
+
between
+
between
+
+
+
+
+
around
+
around
+
+
+
+ + +
+

06. Column Offset

+
+
+
col-4
+
col-4 offset-4
+
+
+
col-3 offset-3
+
col-3 offset-3
+
+
+
col-6 offset-3 (centered)
+
+
+
+ + +
+

07. Auto-Width Columns

+
+
+
auto
+
fill
+
auto
+
+
+
equal
+
equal
+
equal
+
+
+
+ + +
+

08. Nested Grid

+
+
+
+ col-8 +
+
nested 6
+
nested 6
+
+
+
col-4
+
+
+
+ + +
+

09. Column Order

+
+
+
First (order-3)
+
Second (order-1)
+
Third (order-2)
+
+
+
+ + +
+

10. CSS Usage

+
+ 
<div class="container">
+  <div class="row gap-md">
+    <div class="col-12 col-md-6 col-lg-4">
+      Responsive column
+    </div>
+    <div class="col-12 col-md-6 col-lg-4">
+      Responsive column
+    </div>
+    <div class="col-12 col-md-12 col-lg-4">
+      Responsive column
+    </div>
+  </div>
+</div>
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/hero.css b/skills/documatica-v12-design-system/references/hero.css new file mode 100644 index 00000000..f129141e --- /dev/null +++ b/skills/documatica-v12-design-system/references/hero.css @@ -0,0 +1,630 @@ +/** + * Documatica Design System v12.0 + * Hero Section Components + */ + +.container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + HERO BASE + ========================================================================= */ + +.hero { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--spacing-16); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; +} + +.hero__badge { + display: inline-flex; + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-full); + margin-bottom: var(--spacing-6); +} + +.hero__badge--smart { + color: var(--color-smart); + background: rgba(251, 191, 36, 0.15); +} + +.hero__badge--glow { + color: var(--color-smart); + background: rgba(251, 191, 36, 0.15); + box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); +} + +.hero__title { + margin: 0 0 var(--spacing-6); + font-size: clamp(32px, 5vw, 56px); + font-weight: var(--font-weight-black); + color: var(--color-dark); + line-height: var(--line-height-tight); +} + +.hero__title--left { + text-align: left; +} + +.hero__title--large { + font-size: clamp(40px, 6vw, 72px); +} + +.hero__title--mega { + font-size: clamp(48px, 10vw, 120px); + letter-spacing: var(--tracking-ultra); +} + +.hero__text { + margin: 0 0 var(--spacing-8); + font-size: var(--font-size-lg); + color: var(--color-slate-500); + max-width: 560px; + line-height: var(--line-height-relaxed); +} + +.hero__text--left { + text-align: left; +} + +.hero__tagline { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); +} + +/* ========================================================================= + HERO ACTIONS + ========================================================================= */ + +.hero__actions { + display: flex; + gap: var(--spacing-4); + flex-wrap: wrap; + justify-content: center; +} + +.hero__actions--left { + justify-content: flex-start; +} + +.hero__btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-4) var(--spacing-8); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + text-decoration: none; + border: none; + border-radius: var(--radius-massive); + cursor: pointer; + transition: var(--transition-spring); +} + +.hero__btn svg { + width: 20px; + height: 20px; +} + +.hero__btn--primary { + color: var(--color-white); + background: var(--color-primary); +} + +.hero__btn--primary:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.hero__btn--smart { + color: var(--color-dark); + background: var(--color-smart); +} + +.hero__btn--smart:hover { + transform: translateY(-4px); + box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4); +} + +.hero__btn--outline { + color: var(--color-slate-600); + background: transparent; + border: 2px solid var(--color-slate-300); +} + +.hero__btn--outline:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.hero__btn--ghost { + color: var(--color-slate-600); + background: transparent; +} + +.hero__btn--ghost:hover { + color: var(--color-primary); +} + +.hero__btn--light { + color: var(--color-dark); + background: var(--color-white); +} + +.hero__btn--light:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.hero__btn--underline { + padding: 0; + font-size: var(--font-size-lg); + color: var(--color-slate-600); + background: none; + border: none; + border-bottom: 2px solid var(--color-slate-300); + border-radius: 0; +} + +.hero__btn--underline:hover { + color: var(--color-primary); + border-color: var(--color-primary); +} + +/* ========================================================================= + HERO STATS + ========================================================================= */ + +.hero__stats { + display: flex; + gap: var(--spacing-10); + margin-top: var(--spacing-12); + padding-top: var(--spacing-8); + border-top: 1px solid var(--color-slate-200); +} + +.hero__stat { + display: flex; + flex-direction: column; + align-items: center; +} + +.hero__stat-value { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-primary); +} + +.hero__stat-label { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + SPLIT HERO + ========================================================================= */ + +.hero--split { + flex-direction: row; + text-align: left; + padding: var(--spacing-12); + gap: var(--spacing-12); +} + +.hero__content { + flex: 1; +} + +.hero__visual { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.hero-mockup { + width: 100%; + max-width: 360px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +.mockup-bar { + display: flex; + gap: var(--spacing-2); + padding: var(--spacing-3); + background: var(--color-slate-100); + border-bottom: 1px solid var(--color-slate-200); +} + +.mockup-dot { + width: 10px; + height: 10px; + background: var(--color-slate-300); + border-radius: var(--radius-full); +} + +.mockup-content { + display: flex; + padding: var(--spacing-4); + gap: var(--spacing-4); + min-height: 200px; +} + +.mockup-sidebar { + width: 80px; + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.mockup-item { + height: 32px; + background: var(--color-slate-100); + border-radius: var(--radius-lg); +} + +.mockup-item--active { + background: rgba(59, 130, 246, 0.2); +} + +.mockup-main { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.mockup-card { + height: 80px; + background: var(--color-slate-100); + border-radius: var(--radius-lg); +} + +.mockup-card--sm { + height: 48px; +} + +/* ========================================================================= + DARK HERO + ========================================================================= */ + +.hero--dark { + background: var(--color-dark); + border-color: var(--color-slate-800); +} + +.hero--dark .hero__title { + color: var(--color-white); +} + +.hero--dark .hero__text { + color: var(--color-slate-400); +} + +.hero__glow { + position: absolute; + top: -150px; + left: 50%; + transform: translateX(-50%); + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%); + pointer-events: none; +} + +.hero__features { + display: flex; + gap: var(--spacing-6); + flex-wrap: wrap; + justify-content: center; + margin-bottom: var(--spacing-8); +} + +.hero__feature { + display: flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + background: var(--color-slate-800); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + color: var(--color-slate-300); +} + +.hero__feature svg { + width: 18px; + height: 18px; + color: var(--color-success); +} + +/* ========================================================================= + GRADIENT HERO + ========================================================================= */ + +.hero--gradient { + background: linear-gradient(135deg, #dbeafe 0%, #fef3c7 100%); + border: none; +} + +.hero__input-group { + display: flex; + gap: var(--spacing-3); + width: 100%; + max-width: 480px; +} + +.hero__input { + flex: 1; + padding: var(--spacing-4) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-base); + color: var(--color-dark); + background: var(--color-white); + border: 2px solid var(--color-white); + border-radius: var(--radius-massive); + outline: none; + transition: var(--transition-base); +} + +.hero__input:focus { + border-color: var(--color-primary); +} + +.hero__input::placeholder { + color: var(--color-slate-400); +} + +.hero__disclaimer { + margin-top: var(--spacing-4); + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +/* ========================================================================= + MINIMAL HERO + ========================================================================= */ + +.hero--minimal { + padding: var(--spacing-20); + background: var(--color-white); +} + +/* ========================================================================= + VIDEO HERO + ========================================================================= */ + +.hero--video { + position: relative; + min-height: 400px; + padding: var(--spacing-20); +} + +.hero__video-bg { + position: absolute; + inset: 0; + overflow: hidden; +} + +.video-placeholder { + width: 100%; + height: 100%; + background: var(--color-dark); +} + +.video-grid { + width: 100%; + height: 100%; + background-image: + linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px); + background-size: 40px 40px; + animation: grid-move 20s linear infinite; +} + +@keyframes grid-move { + 0% { background-position: 0 0; } + 100% { background-position: 40px 40px; } +} + +.hero__overlay { + position: absolute; + inset: 0; + background: rgba(15, 23, 42, 0.7); +} + +.hero__content-video { + position: relative; + z-index: 1; +} + +.hero--video .hero__title { + color: var(--color-white); +} + +.hero--video .hero__text { + color: var(--color-slate-400); +} + +.hero__play-btn { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + margin: var(--spacing-6) auto; + background: var(--color-white); + border: none; + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-spring); +} + +.hero__play-btn svg { + width: 32px; + height: 32px; + color: var(--color-primary); + margin-left: 4px; +} + +.hero__play-btn:hover { + transform: scale(1.1); + box-shadow: 0 10px 40px rgba(255, 255, 255, 0.3); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .hero { + padding: var(--spacing-10); + } + + .hero--split { + flex-direction: column; + } + + .hero__content { + text-align: center; + } + + .hero__title--left, + .hero__text--left { + text-align: center; + } + + .hero__actions--left { + justify-content: center; + } + + .hero__stats { + flex-direction: column; + gap: var(--spacing-6); + } + + .hero__input-group { + flex-direction: column; + } + + .hero__features { + flex-direction: column; + align-items: center; + } +} diff --git a/skills/documatica-v12-design-system/references/hero.html b/skills/documatica-v12-design-system/references/hero.html new file mode 100644 index 00000000..f510a0a8 --- /dev/null +++ b/skills/documatica-v12-design-system/references/hero.html @@ -0,0 +1,204 @@ + + + + + + Hero Section — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Hero Protocol v12.0 +
+

+ Hero Section +

+
+ + +
+

01. Centered Hero

+
+
Новинка 2025
+

Умный документооборот
нового поколения

+

AI анализирует, классифицирует и индексирует ваши документы за секунды. Экономьте до 80% времени на обработке.

+
+ + +
+
+
+ 10K+ + Компаний +
+
+ 1M+ + Документов +
+
+ 99.9% + Uptime +
+
+
+
+ + +
+

02. Split Hero (Text + Image)

+
+
+
AI Powered
+

Документы работают
на вас

+

Загрузите документы — AI сделает остальное. Умный поиск, автоматическая классификация, мгновенный доступ.

+
+ + +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+

03. Dark Hero

+
+
+
Enterprise Ready
+

Безопасность
корпоративного уровня

+

End-to-end шифрование, SOC 2, GDPR compliance. Ваши данные под надёжной защитой.

+
+
+ + + + SOC 2 Type II +
+
+ + + + E2E Encryption +
+
+ + + + GDPR Ready +
+
+
+ +
+
+
+ + +
+

04. Gradient Hero

+
+

Будущее уже здесь

+

Присоединяйтесь к тысячам компаний, которые уже используют Documatica для автоматизации документооборота

+
+ + +
+

Бесплатно на 14 дней. Без карты.

+
+
+ + +
+

05. Minimal Hero

+
+

DOCUMATICA

+

Smart Document Intelligence

+ +
+
+ + +
+

06. Video Background Hero

+
+
+
+
+
+
+
+
+

Смотрите как
это работает

+ +

2:30 минут

+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/icons.css b/skills/documatica-v12-design-system/references/icons.css new file mode 100644 index 00000000..5c70830e --- /dev/null +++ b/skills/documatica-v12-design-system/references/icons.css @@ -0,0 +1,351 @@ +/** + * Documatica Design System v12.0 + * Icons Showcase + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1100px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + INFO BANNER + ========================================================================= */ + +.info-banner { + display: flex; + gap: var(--spacing-5); + padding: var(--spacing-6); + background: rgba(59, 130, 246, 0.05); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: var(--radius-2xl); +} + +.info-banner__icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: var(--radius-xl); + color: var(--color-white); + flex-shrink: 0; +} + +.info-banner__icon svg { + width: 24px; + height: 24px; +} + +.info-banner__content { + flex: 1; +} + +.info-banner__title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin: 0 0 var(--spacing-2); +} + +.info-banner__text { + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); + margin: 0 0 var(--spacing-3); +} + +.info-banner__link { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-decoration: none; +} + +.info-banner__link:hover { + text-decoration: underline; +} + +/* ========================================================================= + ICONS GRID + ========================================================================= */ + +.icons-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: var(--spacing-4); +} + +.icon-card { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-spring); + cursor: pointer; +} + +.icon-card:hover { + transform: translateY(-4px); + border-color: var(--color-primary); + box-shadow: var(--shadow-lg); +} + +.icon-card--smart:hover { + border-color: var(--color-smart); +} + +.icon-preview { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-dark); +} + +.icon-preview svg { + width: 28px; + height: 28px; +} + +.icon-preview--success { + color: var(--color-success); +} + +.icon-preview--danger { + color: var(--color-danger); +} + +.icon-preview--warning { + color: #f59e0b; +} + +.icon-preview--info { + color: #6366f1; +} + +.icon-preview--smart { + color: var(--color-smart); +} + +.icon-name { + font-size: 11px; + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + text-align: center; + word-break: break-all; +} + +/* ========================================================================= + SIZES + ========================================================================= */ + +.sizes-row { + display: flex; + align-items: flex-end; + justify-content: center; + gap: var(--spacing-8); + padding: var(--spacing-10); + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-md); +} + +.size-demo { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-3); +} + +.size-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); +} + +.size-icon--xs { + width: 16px; + height: 16px; +} + +.size-icon--xs svg { + width: 16px; + height: 16px; +} + +.size-icon--sm { + width: 20px; + height: 20px; +} + +.size-icon--sm svg { + width: 20px; + height: 20px; +} + +.size-icon--base { + width: 24px; + height: 24px; +} + +.size-icon--base svg { + width: 24px; + height: 24px; +} + +.size-icon--lg { + width: 32px; + height: 32px; +} + +.size-icon--lg svg { + width: 32px; + height: 32px; +} + +.size-icon--xl { + width: 48px; + height: 48px; +} + +.size-icon--xl svg { + width: 48px; + height: 48px; +} + +.size-label { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + white-space: nowrap; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .icons-grid { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } + + .info-banner { + flex-direction: column; + } + + .sizes-row { + flex-wrap: wrap; + gap: var(--spacing-6); + } +} diff --git a/skills/documatica-v12-design-system/references/icons.html b/skills/documatica-v12-design-system/references/icons.html new file mode 100644 index 00000000..10ea77b4 --- /dev/null +++ b/skills/documatica-v12-design-system/references/icons.html @@ -0,0 +1,610 @@ + + + + + + Icons — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Icon Protocol v12.0 +
+

+ Icons +

+
+ + +
+
+
+ + + +
+
+

Heroicons

+

Documatica использует иконки из библиотеки Heroicons в outline стиле. Все иконки SVG с stroke-width="2" для консистентности.

+ heroicons.com → +
+
+
+ + +
+

01. Actions

+
+ +
+
+ + + +
+ plus +
+ +
+
+ + + +
+ x +
+ +
+
+ + + +
+ check +
+ +
+
+ + + +
+ pencil +
+ +
+
+ + + +
+ trash +
+ +
+
+ + + +
+ duplicate +
+ +
+
+ + + +
+ upload +
+ +
+
+ + + +
+ download +
+ +
+
+ + + +
+ share +
+ +
+
+ + + +
+ refresh +
+ +
+
+ + + +
+ adjustments +
+ +
+
+ + + +
+ filter +
+ +
+
+ + +
+

02. Navigation

+
+ +
+
+ + + +
+ home +
+ +
+
+ + + +
+ menu +
+ +
+
+ + + +
+ search +
+ +
+
+ + + +
+ chevron-left +
+ +
+
+ + + +
+ chevron-right +
+ +
+
+ + + +
+ chevron-up +
+ +
+
+ + + +
+ chevron-down +
+ +
+
+ + + +
+ arrow-right +
+ +
+
+ + + +
+ arrow-left +
+ +
+
+ + + +
+ external-link +
+ +
+
+ + +
+

03. Documents

+
+ +
+
+ + + +
+ document-text +
+ +
+
+ + + +
+ document +
+ +
+
+ + + +
+ document-add +
+ +
+
+ + + +
+ folder +
+ +
+
+ + + +
+ folder-add +
+ +
+
+ + + +
+ folder-open +
+ +
+
+ + + +
+ archive +
+ +
+
+ + + +
+ paperclip +
+ +
+
+ + +
+

04. Status & Feedback

+
+ +
+
+ + + +
+ check-circle +
+ +
+
+ + + +
+ x-circle +
+ +
+
+ + + +
+ exclamation +
+ +
+
+ + + +
+ information-circle +
+ +
+
+ + + +
+ question-mark-circle +
+ +
+
+ + + +
+ bell +
+ +
+
+ + +
+

05. User & Auth

+
+ +
+
+ + + +
+ user +
+ +
+
+ + + +
+ user-group +
+ +
+
+ + + +
+ user-add +
+ +
+
+ + + +
+ user-circle +
+ +
+
+ + + +
+ lock-closed +
+ +
+
+ + + +
+ lock-open +
+ +
+
+ + + +
+ key +
+ +
+
+ + + +
+ logout +
+ +
+
+ + +
+

06. AI & Smart Features

+
+ +
+
+ + + +
+ lightbulb +
+ +
+
+ + + +
+ lightning-bolt +
+ +
+
+ + + +
+ sparkles +
+ +
+
+ + + +
+ desktop-computer +
+ +
+
+ + + +
+ code +
+ +
+
+ + + +
+ database +
+ +
+
+ + +
+

07. Sizes

+
+ +
+
+ + + +
+ 16px (XS) +
+ +
+
+ + + +
+ 20px (SM) +
+ +
+
+ + + +
+ 24px (Base) +
+ +
+
+ + + +
+ 32px (LG) +
+ +
+
+ + + +
+ 48px (XL) +
+ +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/index.html b/skills/documatica-v12-design-system/references/index.html new file mode 100644 index 00000000..80a15126 --- /dev/null +++ b/skills/documatica-v12-design-system/references/index.html @@ -0,0 +1,1497 @@ + + + + + + Documatica Design System v12.0 + + + + + + +
+ + +
+
+
+ Design System v12.0 +
+

+ Documatica
+ UI Kit +

+

+ Полная библиотека компонентов для создания интерфейсов в стиле инженерного терминала. +

+
+ + +
+
+ 48 + Компонентов +
+
+ 300+ + Вариантов +
+
+ 4 + Цвета бренда +
+
+ + +

01. Foundation

+
+ + + + + + +
+ + + +
+ Brand +

Цвета

+

+ Core Blue, Smart Gold, Dark Slate и полная палитра оттенков. +

+ 4 основных + 10 оттенков + + + + + + + +
+ + + +
+ Type +

Типографика

+

+ Inter Black, заголовки, подписи и стили текста. +

+ 7 размеров + 4 начертания + + + + + + + +
+ + + +
+ Assets +

Иконки

+

+ Библиотека иконок для навигации и действий. +

+ + + Ready + + + +
+ + +

02. Components

+
+ + + + + + +
+ + + +
+ Interactive +

Кнопки

+

+ Primary, Secondary, Smart, Outline и специальные состояния. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Поля ввода

+

+ Text input, Textarea, поиск и поля с иконками. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Селекты

+

+ Dropdown, мультиселект и кастомные списки. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Чекбоксы

+

+ Checkbox, Radio и Toggle переключатели. +

+ + + Ready + + + + + + + + +
+ + + +
+ Layout +

Карточки

+

+ Feature cards, статистика и информационные блоки. +

+ + + Ready + + + + + + + + +
+ + + +
+ Data +

Бейджи

+

+ Tags, статусы и метки данных. +

+ + + Ready + + + + + + + + +
+ + + +
+ Feedback +

Алерты

+

+ Уведомления, предупреждения и сообщения об ошибках. +

+ + + Ready + + + + + + + + +
+ + + +
+ Data +

Таблицы

+

+ Data tables с сортировкой и статусами. +

+ + + Ready + + + + + + + + +
+ + + +
+ Feedback +

Прогресс

+

+ Progress bars, спиннеры и skeleton loaders. +

+ + + Ready + + + + + + + + +
+ + + +
+ User +

Аватары

+

+ Фото пользователей, инициалы и групповые аватары. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Загрузка файлов

+

+ Dropzone, drag-and-drop и превью файлов. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Слайдеры

+

+ Range sliders и ползунки настроек. +

+ + + Ready + + + + + + + + +
+ + + +
+ Feedback +

Рейтинг

+

+ Звёзды, оценки и лайки. +

+ + + Ready + + + + + + + + +
+ + + +
+ Data +

Таймлайн

+

+ История событий и хронология. +

+ + + Ready + + + + + + + + +
+ + + +
+ Data +

Статистика

+

+ Карточки метрик и счётчики. +

+ + + Ready + + + + + + + + +
+ + + +
+ Layout +

Списки

+

+ Группы элементов и меню действий. +

+ + + Ready + + + + + + + + +
+ + + +
+ Layout +

Разделители

+

+ Линии и декоративные разделители. +

+ + + Ready + + + + + + + + +
+ + + +
+ Forms +

Календарь

+

+ Date picker и выбор диапазонов. +

+ + + Ready + + + + + + + + +
+ + + +
+ Media +

Галерея

+

+ Сетки изображений и lightbox. +

+ + + Ready + + + + + + + + +
+ + + +
+ Social +

Комментарии

+

+ Обсуждения и треды комментариев. +

+ + + Ready + + + +
+ + +

03. Patterns

+
+ + + + + + +
+ + + +
+ Navigation +

Навигация

+

+ Navbar, Sidebar, Tabs и Breadcrumbs. +

+ + + Ready + + + + + + + + +
+ + + +
+ Overlay +

Модалки

+

+ Dialogs, confirmation и AI Butler интерфейс. +

+ + + Ready + + + + + + + + +
+ + + +
+ Content +

Аккордеон

+

+ FAQ секции и раскрывающиеся блоки. +

+ + + Ready + + + + + + + + +
+ + + +
+ Feedback +

Пустые состояния

+

+ Экраны «нет данных» и первый запуск. +

+ + + Ready + + + + + + + + +
+ + + +
+ Pages +

Страницы ошибок

+

+ 404, 500, maintenance и offline. +

+ + + Ready + + + + + + + + +
+ + + +
+ Sections +

Hero

+

+ Главные секции лендингов. +

+ + + Ready + + + + + + + + +
+ + + +
+ Sections +

Footer

+

+ Подвалы сайтов разных типов. +

+ + + Ready + + + + + + + + +
+ + + +
+ Marketing +

Pricing

+

+ Таблицы тарифов и сравнения. +

+ + + Ready + + + + + + + + +
+ + + +
+ Marketing +

Отзывы

+

+ Testimonials и цитаты клиентов. +

+ + + Ready + + + + + + + + +
+ + + +
+ Communication +

Чат

+

+ Сообщения и AI-ассистент. +

+ + + Ready + + + +
+ + +

04. Layout & Grid

+
+ + + + + + +
+ + + +
+ Layout +

Grid System

+

+ Сетка, контейнеры и колонки. +

+ + + Soon + + + + + + + + +
+ + + +
+ Layout +

Containers

+

+ Резиновый и центрированный. +

+ + + Soon + + + + + + + + +
+ + + +
+ Layout +

Sidebar

+

+ Боковые панели для блога и магазина. +

+ + + Soon + + + + + + + + +
+ + + +
+ Layout +

Masonry

+

+ Pinterest-стиль плитка. +

+ + + Soon + + + + + + + + +
+ + + +
+ Navigation +

Pagination

+

+ Постраничная навигация. +

+ + + Soon + + + + + + + + +
+ + + +
+ Navigation +

Tabs

+

+ Вкладки и табы. +

+ + + Soon + + + +
+ + +

05. Page Templates

+
+ + + + + + +
+ + + +
+ Pages +

Blog Article

+

+ Статья блога с сайдбаром и без. +

+ + + Soon + + + + + + + + +
+ + + +
+ Pages +

Service Page

+

+ Страница услуги. +

+ + + Soon + + + + + + + + +
+ + + +
+ Pages +

Profile

+

+ Профиль пользователя. +

+ + + Soon + + + +
+ + +

06. E-Commerce

+
+ + + + + + +
+ + + +
+ Shop +

Category

+

+ Страница категории товаров. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Product

+

+ Карточка товара. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Cart

+

+ Корзина покупок. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Checkout

+

+ Оформление заказа. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Favorites

+

+ Избранное и wishlist. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Compare

+

+ Сравнение товаров. +

+ + + Soon + + + + + + + + +
+ + + +
+ Shop +

Reviews

+

+ Отзывы о товарах. +

+ + + Soon + + + +
+ + +

07. Social & Maps

+
+ + + + + + +
+ + + +
+ Social +

Social Media

+

+ Иконки и виджеты соцсетей. +

+ + + Soon + + + + + + + + +
+ + + + +
+ Location +

Map

+

+ Карты и геолокация. +

+ + + Soon + + + +
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/inputs.css b/skills/documatica-v12-design-system/references/inputs.css new file mode 100644 index 00000000..41b38f8e --- /dev/null +++ b/skills/documatica-v12-design-system/references/inputs.css @@ -0,0 +1,512 @@ +/** + * Documatica Design System v12.0 + * Input Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1200px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +/* Back Link */ +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* Header */ +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +/* Section */ +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +/* Showcase Grid */ +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--spacing-10); +} + +.showcase-grid--wide { + grid-template-columns: 1fr; +} + +.showcase-grid--align-end { + align-items: end; +} + +.showcase { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.showcase--wide { + grid-column: 1 / -1; + max-width: 600px; +} + +.showcase__label { + margin-top: var(--spacing-4); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-300); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +/* Footer */ +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + INPUT LABEL + ========================================================================= */ + +.input-label { + display: block; + margin-bottom: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.input-label--disabled { + color: var(--color-slate-300); +} + +.input-label--smart { + display: flex; + align-items: center; + gap: var(--spacing-2); + color: var(--color-smart); +} + +.input-label__icon { + width: 14px; + height: 14px; +} + +/* ========================================================================= + INPUT BASE + ========================================================================= */ + +.input { + width: 100%; + height: var(--input-height-md); + padding: 0 var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background-color: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + outline: none; + transition: var(--transition-base); +} + +.input::placeholder { + color: var(--color-slate-400); + font-weight: var(--font-weight-regular); +} + +/* Focus State */ +.input:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +/* Hover State */ +.input:hover:not(:focus):not(:disabled) { + border-color: var(--color-slate-300); +} + +/* Filled State */ +.input--filled { + color: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +/* Disabled State */ +.input:disabled { + background-color: var(--color-slate-100); + color: var(--color-slate-400); + cursor: not-allowed; +} + +/* Readonly State */ +.input[readonly] { + background-color: var(--color-slate-50); +} + +/* Error State */ +.input--error { + border-color: var(--color-danger); + background-color: var(--color-danger-light); +} + +.input--error:focus { + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); +} + +/* Success State */ +.input--success { + border-color: var(--color-success); +} + +.input--success:focus { + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); +} + +/* ========================================================================= + INPUT SIZES + ========================================================================= */ + +.input--sm { + height: var(--input-height-sm); + padding: 0 var(--spacing-4); + font-size: var(--font-size-md); + border-radius: var(--radius-lg); +} + +.input--lg { + height: var(--input-height-lg); + padding: 0 var(--spacing-6); + font-size: var(--font-size-2xl); + border-radius: var(--radius-2xl); +} + +/* ========================================================================= + INPUT WITH ICONS + ========================================================================= */ + +.input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.input-icon { + position: absolute; + width: 20px; + height: 20px; + color: var(--color-slate-400); + pointer-events: none; +} + +.input-icon--left { + left: var(--spacing-4); +} + +.input-icon--right { + right: var(--spacing-4); +} + +.input-icon--success { + color: var(--color-success); +} + +.input--icon-left { + padding-left: calc(var(--spacing-4) + 20px + var(--spacing-3)); +} + +.input--icon-right { + padding-right: calc(var(--spacing-4) + 20px + var(--spacing-3)); +} + +/* Icon Button (Toggle) */ +.input-icon-btn { + position: absolute; + right: var(--spacing-3); + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: none; + border: none; + border-radius: var(--radius-md); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.input-icon-btn:hover { + background-color: var(--color-slate-100); + color: var(--color-slate-600); +} + +.input-icon-btn svg { + width: 20px; + height: 20px; +} + +/* ========================================================================= + INPUT ADDON + ========================================================================= */ + +.input-addon { + display: flex; + align-items: center; + justify-content: center; + height: var(--input-height-md); + padding: 0 var(--spacing-4); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background-color: var(--color-slate-100); + border: 1px solid var(--color-slate-200); +} + +.input-addon--left { + border-radius: var(--radius-xl) 0 0 var(--radius-xl); + border-right: none; +} + +.input--addon-left { + border-radius: 0 var(--radius-xl) var(--radius-xl) 0; +} + +/* ========================================================================= + AI SMART INPUT + ========================================================================= */ + +.input-wrapper--smart { + position: relative; +} + +.input-smart-dot { + position: absolute; + left: var(--spacing-5); + width: 10px; + height: 10px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); + animation: pulse 2s ease-in-out infinite; + z-index: 1; +} + +.input--smart { + padding-left: calc(var(--spacing-5) + 10px + var(--spacing-4)); + background-color: var(--color-dark); + border-color: var(--color-slate-700); + color: var(--color-white); +} + +.input--smart::placeholder { + color: var(--color-slate-400); +} + +.input--smart:focus { + border-color: var(--color-smart); + box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2); +} + +/* ========================================================================= + INPUT HINTS & MESSAGES + ========================================================================= */ + +.input-hint { + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.input-error { + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-danger); +} + +.input-success { + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-success); +} + +/* ========================================================================= + TEXTAREA + ========================================================================= */ + +.textarea { + width: 100%; + min-height: 120px; + padding: var(--spacing-4) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-regular); + color: var(--color-dark); + background-color: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + outline: none; + resize: vertical; + transition: var(--transition-base); + line-height: var(--line-height-relaxed); +} + +.textarea::placeholder { + color: var(--color-slate-400); +} + +.textarea:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +.textarea:hover:not(:focus):not(:disabled) { + border-color: var(--color-slate-300); +} + +.textarea-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-2); +} + +.textarea-counter { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); +} + +/* ========================================================================= + INPUT GROUPS + ========================================================================= */ + +.input-group { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-6); + margin-bottom: var(--spacing-8); +} + +.input-group--3 { + grid-template-columns: repeat(3, 1fr); +} + +.input-group__item { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .showcase-grid { + grid-template-columns: 1fr; + } + + .input-group, + .input-group--3 { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/inputs.html b/skills/documatica-v12-design-system/references/inputs.html new file mode 100644 index 00000000..f0d52817 --- /dev/null +++ b/skills/documatica-v12-design-system/references/inputs.html @@ -0,0 +1,268 @@ + + + + + + Inputs — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Forms Protocol v12.0 +
+

+ Поля ввода +

+
+ + +
+

01. Basic Inputs

+
+ + +
+ + + Standard Input +
+ + +
+ + + Filled State +
+ + +
+ + + Корпоративная почта для уведомлений + With Hint +
+ +
+
+ + +
+

02. Input States

+
+ + +
+ + + Disabled +
+ + +
+ + + ИНН должен содержать 10 или 12 цифр + Error State +
+ + +
+ +
+ + + + +
+ Верифицировано в ЕГРЮЛ + Success State +
+ +
+
+ + +
+

03. Inputs with Icons

+
+ + +
+ +
+ + + + +
+ Search Input +
+ + +
+ +
+ + +
+ Password Toggle +
+ + +
+ +
+ ₽ + +
+ With Addon +
+ +
+
+ + +
+

04. AI Smart Input

+
+ + +
+ +
+
+ +
+ AI Prompt Input +
+ +
+
+ + +
+

05. Textarea

+
+ + +
+ + + Standard Textarea +
+ + +
+ + +
+ Максимум 500 символов + 78/500 +
+ With Character Counter +
+ +
+
+ + +
+

06. Size Variants

+
+ +
+ + + Small +
+ +
+ + + Medium +
+ +
+ + + Large +
+ +
+
+ + +
+

07. Input Groups

+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/list-group.css b/skills/documatica-v12-design-system/references/list-group.css new file mode 100644 index 00000000..5ccc418a --- /dev/null +++ b/skills/documatica-v12-design-system/references/list-group.css @@ -0,0 +1,439 @@ +/** + * Documatica Design System v12.0 + * List Group Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + LIST GROUP BASE + ========================================================================= */ + +.list-group { + list-style: none; + margin: 0; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.list-item { + padding: var(--spacing-4) var(--spacing-5); + font-size: var(--font-size-base); + color: var(--color-dark); + border-bottom: 1px solid var(--color-slate-100); + transition: var(--transition-base); +} + +.list-item:last-child { + border-bottom: none; +} + +/* ========================================================================= + WITH ICONS + ========================================================================= */ + +.list-item--icon { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.list-icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + flex-shrink: 0; +} + +.list-icon svg { + width: 20px; + height: 20px; +} + +.list-icon--primary { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.list-icon--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.list-icon--smart { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.list-icon--danger { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +/* ========================================================================= + INTERACTIVE / LINKS + ========================================================================= */ + +.list-item--link { + display: flex; + align-items: center; + justify-content: space-between; + text-decoration: none; + color: var(--color-dark); + cursor: pointer; +} + +.list-item--link:hover { + background: var(--color-slate-50); +} + +.list-item--link:active { + background: var(--color-slate-100); +} + +.list-item--active { + background: rgba(59, 130, 246, 0.05); + border-left: 3px solid var(--color-primary); + color: var(--color-primary); +} + +.list-item--disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +.list-arrow { + width: 18px; + height: 18px; + color: var(--color-slate-400); + transition: var(--transition-base); +} + +.list-item--link:hover .list-arrow { + transform: translateX(4px); + color: var(--color-primary); +} + +/* ========================================================================= + WITH BADGES + ========================================================================= */ + +.list-item--between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.list-badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 24px; + height: 24px; + padding: 0 var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + background: var(--color-slate-100); + border-radius: var(--radius-full); +} + +.list-badge--primary { + color: var(--color-white); + background: var(--color-primary); +} + +.list-badge--danger { + color: var(--color-white); + background: var(--color-danger); +} + +/* ========================================================================= + WITH AVATARS + ========================================================================= */ + +.list-item--user { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.list-avatar { + width: 44px; + height: 44px; + border-radius: var(--radius-full); + object-fit: cover; + flex-shrink: 0; +} + +.list-user-info { + display: flex; + flex-direction: column; + flex: 1; +} + +.list-user-name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.list-user-role { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.list-status { + width: 10px; + height: 10px; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.list-status--online { + background: var(--color-success); +} + +.list-status--offline { + background: var(--color-slate-400); +} + +.list-status--busy { + background: var(--color-danger); +} + +/* ========================================================================= + WITH ACTIONS + ========================================================================= */ + +.list-item--actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-4); +} + +.list-content { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; +} + +.list-title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.list-meta { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.list-actions { + display: flex; + gap: var(--spacing-2); +} + +.list-action { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.list-action svg { + width: 18px; + height: 18px; +} + +.list-action:hover { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +.list-action--danger:hover { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +/* ========================================================================= + SELECTABLE + ========================================================================= */ + +.list-item--selectable { + display: flex; + align-items: center; + gap: var(--spacing-4); + cursor: pointer; +} + +.list-item--selectable:hover { + background: var(--color-slate-50); +} + +.list-checkbox { + width: 20px; + height: 20px; + accent-color: var(--color-primary); + cursor: pointer; +} + +.list-item--selectable .list-text { + cursor: pointer; +} + +/* ========================================================================= + FLUSH + ========================================================================= */ + +.list-group--flush { + border: none; + border-radius: 0; + background: transparent; +} + +.list-group--flush .list-item { + padding-left: 0; + padding-right: 0; + border-bottom-color: var(--color-slate-200); +} + +.list-group--flush .list-item:first-child { + padding-top: 0; +} + +.list-group--flush .list-item:last-child { + padding-bottom: 0; +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .list-item--actions { + flex-direction: column; + align-items: flex-start; + } + + .list-actions { + margin-top: var(--spacing-3); + } +} diff --git a/skills/documatica-v12-design-system/references/list-group.html b/skills/documatica-v12-design-system/references/list-group.html new file mode 100644 index 00000000..08d4a5b9 --- /dev/null +++ b/skills/documatica-v12-design-system/references/list-group.html @@ -0,0 +1,258 @@ + + + + + + List Group — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ List Protocol v12.0 +
+

+ List Group +

+
+ + +
+

01. Basic List

+ +
+ + +
+

02. With Icons

+ +
+ + +
+

03. Interactive / Links

+ +
+ + +
+

04. With Badges

+ +
+ + +
+

05. With Avatars

+ +
+ + +
+

06. With Actions

+ +
+ + +
+

07. Selectable

+ +
+ + +
+

08. Flush (No Border)

+ +
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/map.css b/skills/documatica-v12-design-system/references/map.css new file mode 100644 index 00000000..e86ce087 --- /dev/null +++ b/skills/documatica-v12-design-system/references/map.css @@ -0,0 +1,855 @@ +/** + * UI Kit v12.0 — Map + * Maps, markers, location cards + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +/* ========================================================================= + MAP CONTAINER + ========================================================================= */ + +.map-container { + position: relative; + background: var(--color-white); + border-radius: 28px; + overflow: hidden; +} + +.map-placeholder { + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + background: linear-gradient(135deg, var(--color-slate-100) 0%, var(--color-slate-200) 100%); + color: var(--color-slate-400); +} + +.map-placeholder span { + font-size: 14px; + font-weight: 500; +} + +.map-placeholder--lg { + height: 100%; + min-height: 400px; +} + +.map-controls { + position: absolute; + top: 20px; + right: 20px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.map-control { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: none; + border-radius: 12px; + color: var(--color-slate-600); + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; +} + +.map-control:hover { + background: var(--color-primary); + color: white; +} + +/* ========================================================================= + LOCATION CARDS + ========================================================================= */ + +.location-cards { + display: flex; + flex-direction: column; + gap: 20px; +} + +.location-card { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; +} + +.location-card__map { + height: 200px; + background: linear-gradient(135deg, var(--color-slate-100) 0%, var(--color-slate-200) 100%); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.location-card__map--sm { + width: 160px; + height: auto; + min-height: 140px; + flex-shrink: 0; +} + +.location-card__marker { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + animation: bounce 2s ease-in-out infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.location-card__body { + padding: 28px; +} + +.location-card__badge { + font-size: 11px; + font-weight: 700; + color: var(--color-success); + letter-spacing: 0.1em; + margin-bottom: 12px; + display: block; +} + +.location-card__title { + font-size: 24px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 12px 0; +} + +.location-card__address { + font-size: 15px; + color: var(--color-slate-600); + line-height: 1.6; + margin: 0 0 20px 0; +} + +.location-card__details { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 24px; +} + +.location-card__detail { + display: flex; + align-items: center; + gap: 10px; + font-size: 14px; + color: var(--color-slate-500); +} + +.location-card__detail svg { + color: var(--color-primary); +} + +.location-card__link { + font-size: 14px; + font-weight: 600; + color: var(--color-primary); + text-decoration: none; +} + +.location-card__link:hover { + text-decoration: underline; +} + +/* Horizontal layout */ +.location-card--horizontal { + display: flex; +} + +.location-card--horizontal .location-card__body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* ========================================================================= + MARKERS + ========================================================================= */ + +.markers-demo { + display: flex; + flex-wrap: wrap; + gap: 24px; + background: var(--color-white); + border-radius: 24px; + padding: 32px; +} + +.marker-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.marker-item span { + font-size: 12px; + font-weight: 600; + color: var(--color-slate-400); +} + +.marker { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50% 50% 50% 0; + transform: rotate(-45deg); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.marker svg, +.marker span { + transform: rotate(45deg); +} + +.marker--primary { + background: var(--color-primary); + color: white; +} + +.marker--success { + background: var(--color-success); + color: white; +} + +.marker--warning { + background: var(--color-smart); + color: var(--color-dark); +} + +.marker--danger { + background: var(--color-danger); + color: white; +} + +.marker--numbered { + background: var(--color-primary); + color: white; + font-size: 14px; + font-weight: 700; +} + +.marker--cluster { + width: 48px; + height: 48px; + background: var(--color-dark); + color: white; + border-radius: 50%; + transform: none; + font-size: 14px; + font-weight: 700; +} + +/* ========================================================================= + INFO WINDOW + ========================================================================= */ + +.info-window-demo { + display: flex; + justify-content: center; + padding: 60px 20px; + background: var(--color-slate-100); + border-radius: 24px; +} + +.info-window { + position: relative; + width: 280px; + background: var(--color-white); + border-radius: 20px; + overflow: hidden; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); +} + +.info-window__close { + position: absolute; + top: 12px; + right: 12px; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.5); + border: none; + border-radius: 50%; + font-size: 18px; + color: white; + cursor: pointer; + z-index: 1; +} + +.info-window__image { + height: 120px; + background-size: cover; + background-position: center; +} + +.info-window__body { + padding: 20px; +} + +.info-window__title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 6px 0; +} + +.info-window__address { + font-size: 13px; + color: var(--color-slate-500); + margin: 0 0 12px 0; +} + +.info-window__tags { + display: flex; + gap: 8px; + margin-bottom: 16px; +} + +.info-window__tag { + padding: 4px 10px; + background: var(--color-slate-100); + border-radius: 6px; + font-size: 11px; + font-weight: 600; + color: var(--color-slate-500); +} + +.info-window__link { + font-size: 13px; + font-weight: 600; + color: var(--color-primary); + text-decoration: none; +} + +.info-window__arrow { + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 12px solid var(--color-white); +} + +/* ========================================================================= + STORE LOCATOR + ========================================================================= */ + +.store-locator { + display: grid; + grid-template-columns: 360px 1fr; + background: var(--color-white); + border-radius: 28px; + overflow: hidden; + min-height: 500px; +} + +.store-locator__sidebar { + border-right: 1px solid var(--color-slate-100); +} + +.store-locator__search { + display: flex; + align-items: center; + gap: 12px; + padding: 20px; + border-bottom: 1px solid var(--color-slate-100); +} + +.store-locator__search svg { + color: var(--color-slate-400); + flex-shrink: 0; +} + +.store-locator__search input { + flex: 1; + border: none; + background: none; + font-family: inherit; + font-size: 15px; + color: var(--color-dark); +} + +.store-locator__search input::placeholder { + color: var(--color-slate-400); +} + +.store-locator__search input:focus { + outline: none; +} + +.store-locator__list { + max-height: 440px; + overflow-y: auto; +} + +.store-item { + display: flex; + align-items: flex-start; + gap: 16px; + padding: 20px; + border-bottom: 1px solid var(--color-slate-100); + cursor: pointer; + transition: background 0.2s ease; +} + +.store-item:hover { + background: var(--color-slate-50); +} + +.store-item--active { + background: rgba(59, 130, 246, 0.08); + border-left: 3px solid var(--color-primary); +} + +.store-item__marker { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: 50%; + font-size: 13px; + font-weight: 700; + color: white; + flex-shrink: 0; +} + +.store-item__info { + flex: 1; +} + +.store-item__name { + font-size: 15px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.store-item__address { + font-size: 13px; + color: var(--color-slate-500); + margin: 0 0 8px 0; +} + +.store-item__distance { + font-size: 12px; + font-weight: 600; + color: var(--color-primary); +} + +.store-locator__map { + background: var(--color-slate-100); +} + +/* ========================================================================= + CONTACT BLOCK + ========================================================================= */ + +.contact-block { + display: grid; + grid-template-columns: 1fr 1fr; + background: var(--color-white); + border-radius: 28px; + overflow: hidden; +} + +.contact-block__map { + min-height: 400px; +} + +.contact-block__info { + padding: 40px; +} + +.contact-block__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.contact-block__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.contact-block__title { + font-size: 14px; + font-weight: 700; + color: var(--color-dark); + letter-spacing: 0.1em; + margin: 0; +} + +.contact-items { + display: flex; + flex-direction: column; + gap: 24px; +} + +.contact-item { + display: flex; + gap: 16px; +} + +.contact-item__icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(59, 130, 246, 0.1); + border-radius: 12px; + color: var(--color-primary); + flex-shrink: 0; +} + +.contact-item__content { + display: flex; + flex-direction: column; + gap: 4px; +} + +.contact-item__label { + font-size: 12px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.contact-item__value { + font-size: 15px; + font-weight: 600; + color: var(--color-dark); +} + +/* ========================================================================= + ADDRESS AUTOCOMPLETE + ========================================================================= */ + +.address-autocomplete { + max-width: 480px; +} + +.address-input { + display: flex; + align-items: center; + gap: 14px; + padding: 18px 24px; + background: var(--color-white); + border: 2px solid var(--color-primary); + border-radius: 16px 16px 0 0; +} + +.address-input svg { + color: var(--color-slate-400); + flex-shrink: 0; +} + +.address-input input { + flex: 1; + border: none; + background: none; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); +} + +.address-input input:focus { + outline: none; +} + +.address-dropdown { + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-top: none; + border-radius: 0 0 16px 16px; + overflow: hidden; +} + +.address-option { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 24px; + cursor: pointer; + transition: background 0.2s ease; +} + +.address-option:hover { + background: var(--color-slate-50); +} + +.address-option--active { + background: rgba(59, 130, 246, 0.08); +} + +.address-option__icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: 8px; + color: var(--color-slate-500); +} + +.address-option--active .address-option__icon { + background: var(--color-primary); + color: white; +} + +.address-option__text { + display: flex; + flex-direction: column; + gap: 2px; +} + +.address-option__main { + font-size: 14px; + font-weight: 600; + color: var(--color-dark); +} + +.address-option__sub { + font-size: 12px; + color: var(--color-slate-400); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .store-locator { + grid-template-columns: 1fr; + } + + .store-locator__sidebar { + border-right: none; + border-bottom: 1px solid var(--color-slate-100); + } + + .store-locator__map { + min-height: 300px; + } + + .contact-block { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .location-card--horizontal { + flex-direction: column; + } + + .location-card__map--sm { + width: 100%; + height: 160px; + } + + .markers-demo { + justify-content: center; + } +} diff --git a/skills/documatica-v12-design-system/references/map.html b/skills/documatica-v12-design-system/references/map.html new file mode 100644 index 00000000..29ec2e41 --- /dev/null +++ b/skills/documatica-v12-design-system/references/map.html @@ -0,0 +1,438 @@ + + + + + + Map — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● LOCATION +

MAP
CARDS

+

Карты, маркеры, карточки локаций и контактная информация.

+
+ + +
+
+ 01 +

MAP CONTAINER

+
+ +
+
+ + + + + Карта загружается... +
+
+ + +
+
+
+ + +
+
+ 02 +

LOCATION CARD

+
+ +
+
+
+
+ + + + +
+
+
+ ● ГЛАВНЫЙ ОФИС +

Москва

+

ул. Тверская, 12, стр. 1
Бизнес-центр «Метрополь», 5 этаж

+
+
+ + + + +7 (495) 123-45-67 +
+
+ + + + Пн–Пт: 9:00–18:00 +
+
+ +
+
+ +
+
+
+ + + + +
+
+
+ ● ФИЛИАЛ +

Санкт-Петербург

+

Невский пр., 28

+ Подробнее → +
+
+
+
+ + +
+
+ 03 +

MARKER STYLES

+
+ +
+
+
+ + + + +
+ Primary +
+
+
+ + + + +
+ Success +
+
+
+ + + + +
+ Warning +
+
+
+ + + + +
+ Danger +
+
+
1
+ Numbered +
+
+
2
+ Numbered +
+
+
5+
+ Cluster +
+
+
+ + +
+
+ 04 +

INFO WINDOW

+
+ +
+
+ +
+
+

Бизнес-центр «Метрополь»

+

ул. Тверская, 12, стр. 1

+
+ Офис + Парковка +
+ Подробнее → +
+
+
+
+
+ + +
+
+ 05 +

STORE LOCATOR

+
+ +
+
+
+ + + + +
+
+
+
1
+
+

ТЦ «Мега»

+

МКАД 24 км, корп. 1

+ 2.3 км +
+
+
+
2
+
+

ТЦ «Европейский»

+

пл. Киевского вокзала, 2

+ 4.1 км +
+
+
+
3
+
+

ТЦ «Атриум»

+

ул. Земляной Вал, 33

+ 5.8 км +
+
+
+
+
+
+ + + + +
+
+
+
+ + +
+
+ 06 +

CONTACT BLOCK

+
+ +
+
+
+ + + + +
+
+
+
+ 01 +

КОНТАКТЫ

+
+
+
+
+ + + + +
+
+ Адрес + г. Москва, ул. Тверская, 12 +
+
+
+
+ + + +
+
+ Телефон + +7 (495) 123-45-67 +
+
+
+
+ + + + +
+
+ Email + info@company.ru +
+
+
+
+ + + +
+
+ Часы работы + Пн–Пт: 9:00–18:00 +
+
+
+
+
+
+ + +
+
+ 07 +

ADDRESS AUTOCOMPLETE

+
+ +
+
+ + + + +
+
+
+
+ + + + +
+
+ ул. Тверская, 12 + Москва, Центральный район +
+
+
+
+ + + + +
+
+ ул. Тверская, 24 + Москва, Центральный район +
+
+
+
+ + + + +
+
+ Тверская-Ямская ул., 5 + Москва, Тверской район +
+
+
+
+
+ + +
+
+ 08 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Контейнер карты -->
+<div class="map-container">
+  <div id="map"></div>
+  <div class="map-controls">...</div>
+</div>
+
+<!-- Маркеры -->
+<div class="marker marker--primary">...</div>
+<div class="marker marker--numbered">1</div>
+
+<!-- Карточка локации -->
+<div class="location-card">
+  <div class="location-card__map">...</div>
+  <div class="location-card__body">...</div>
+</div>
+
+/* Модификаторы маркеров */
+.marker--primary   /* Синий */
+.marker--success   /* Зелёный */
+.marker--warning   /* Жёлтый */
+.marker--danger    /* Красный */
+.marker--numbered  /* С цифрой */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/masonry.css b/skills/documatica-v12-design-system/references/masonry.css new file mode 100644 index 00000000..b22c43a4 --- /dev/null +++ b/skills/documatica-v12-design-system/references/masonry.css @@ -0,0 +1,478 @@ +/** + * UI Kit v12.0 — Masonry Grid + * Pinterest-style layout with CSS Columns & Grid + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-100); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 24px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +.section__desc { + font-size: 15px; + color: var(--color-slate-500); + margin: -16px 0 24px 0; +} + +.subsection { + margin-bottom: 48px; +} + +.subsection__label { + font-size: 13px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 16px; +} + +/* ========================================================================= + CSS COLUMNS MASONRY + ========================================================================= */ + +.masonry { + column-gap: 16px; +} + +.masonry--2 { column-count: 2; } +.masonry--3 { column-count: 3; } +.masonry--4 { column-count: 4; } +.masonry--5 { column-count: 5; } + +.masonry--gap-sm { column-gap: 8px; } +.masonry--gap-md { column-gap: 16px; } +.masonry--gap-lg { column-gap: 24px; } + +.masonry__item { + break-inside: avoid; + margin-bottom: 16px; +} + +.masonry--gap-sm .masonry__item { margin-bottom: 8px; } +.masonry--gap-lg .masonry__item { margin-bottom: 24px; } + +/* ========================================================================= + PLACEHOLDER CARDS + ========================================================================= */ + +.card { + background: var(--color-slate-100); + border-radius: 16px; + width: 100%; +} + +.card--h-100 { height: 100px; } +.card--h-120 { height: 120px; } +.card--h-140 { height: 140px; } +.card--h-160 { height: 160px; } +.card--h-180 { height: 180px; } +.card--h-200 { height: 200px; } +.card--h-220 { height: 220px; } +.card--h-240 { height: 240px; } +.card--h-260 { height: 260px; } +.card--h-280 { height: 280px; } +.card--h-300 { height: 300px; } + +/* ========================================================================= + PIN CARDS + ========================================================================= */ + +.pin-card { + position: relative; + background: var(--color-white); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease, transform 0.3s ease; +} + +.pin-card:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + transform: translateY(-2px); +} + +.pin-card__image { + width: 100%; + height: 160px; + background: var(--color-slate-200); +} + +.pin-card__image--medium { height: 220px; } +.pin-card__image--tall { height: 280px; } + +.pin-card__body { + padding: 16px; +} + +.pin-card__title { + font-size: 15px; + font-weight: 600; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.pin-card__text { + font-size: 13px; + color: var(--color-slate-500); + margin: 0; + line-height: 1.5; +} + +/* ========================================================================= + PIN CARD OVERLAY + ========================================================================= */ + +.pin-card--hoverable { + cursor: pointer; +} + +.pin-card__overlay { + position: absolute; + inset: 0; + background: linear-gradient(to bottom, + rgba(0,0,0,0.4) 0%, + transparent 40%, + transparent 60%, + rgba(0,0,0,0.5) 100%); + opacity: 0; + transition: opacity 0.3s ease; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 12px; +} + +.pin-card--hoverable:hover .pin-card__overlay { + opacity: 1; +} + +.pin-card__actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.pin-btn { + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.pin-btn--icon { + width: 36px; + height: 36px; + background: var(--color-white); + border-radius: 50%; + color: var(--color-dark); +} + +.pin-btn--icon:hover { + transform: scale(1.1); +} + +.pin-btn--icon.pin-btn--active { + background: var(--color-danger); + color: var(--color-white); +} + +.pin-btn--primary { + padding: 10px 20px; + background: var(--color-primary); + color: var(--color-white); + font-size: 13px; + font-weight: 600; + border-radius: 100px; +} + +.pin-btn--primary:hover { + background: #2563eb; +} + +/* ========================================================================= + PIN CARD FOOTER + ========================================================================= */ + +.pin-card__footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + border-top: 1px solid var(--color-slate-100); +} + +.pin-author { + display: flex; + align-items: center; + gap: 8px; +} + +.pin-author__avatar { + width: 28px; + height: 28px; + background: var(--color-primary); + color: var(--color-white); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 600; +} + +.pin-author__name { + font-size: 13px; + font-weight: 500; + color: var(--color-dark); +} + +.pin-stats { + font-size: 12px; + color: var(--color-slate-400); +} + +/* ========================================================================= + CSS GRID MASONRY + ========================================================================= */ + +.grid-masonry { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 80px; + gap: 16px; +} + +.grid-item { + border-radius: 16px; + background: var(--color-slate-100); + grid-row: span 2; +} + +.grid-item--tall { + grid-row: span 4; +} + +.grid-item--wide { + grid-column: span 2; +} + +/* ========================================================================= + GALLERY ITEMS + ========================================================================= */ + +.gallery-item { + border-radius: 12px; + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gallery-item:hover { + transform: scale(1.02); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +/* ========================================================================= + DEMO LAYOUT + ========================================================================= */ + +.demo-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; +} + +.demo-col { + min-width: 0; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .masonry--5 { column-count: 4; } + .masonry--4 { column-count: 3; } + + .grid-masonry { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .masonry--5, + .masonry--4, + .masonry--3 { column-count: 2; } + + .grid-masonry { + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 60px; + } + + .grid-item--wide { + grid-column: span 1; + } + + .demo-row { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media (max-width: 480px) { + .masonry--5, + .masonry--4, + .masonry--3, + .masonry--2 { column-count: 1; } + + .grid-masonry { + grid-template-columns: 1fr; + } + + .hero__title { + font-size: 32px; + } +} diff --git a/skills/documatica-v12-design-system/references/masonry.html b/skills/documatica-v12-design-system/references/masonry.html new file mode 100644 index 00000000..016fe821 --- /dev/null +++ b/skills/documatica-v12-design-system/references/masonry.html @@ -0,0 +1,438 @@ + + + + + + Masonry — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ LAYOUT SYSTEM +

Masonry Grid

+

Pinterest-style раскладка с помощью CSS Columns и CSS Grid. Адаптивная, производительная, без JavaScript.

+
+ + +
+
+ 01 +

CSS Columns (2-5 колонок)

+
+ +
+

2 Columns

+
+
+
+
+
+
+
+
+
+ +
+

3 Columns

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

4 Columns

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ 02 +

Cards with Content

+
+ +
+
+
+
+
+

Card Title

+

Short description text

+
+
+
+
+
+
+
+

Another Card

+
+
+
+
+
+
+
+

Third Card

+

With longer description that wraps to multiple lines

+
+
+
+
+
+
+
+

Tall Image

+
+
+
+
+
+
+
+

Warm Gradient

+

Description text

+
+
+
+
+
+
+
+

Soft Colors

+
+
+
+
+
+ + +
+
+ 03 +

Hover Overlay Actions

+
+ +
+
+
+
+
+
+ + +
+ Открыть +
+
+
+
+
+
+
+
+ +
+ Открыть +
+
+
+
+
+
+
+
+ +
+ Открыть +
+
+
+
+
+
+
+
+ +
+ Открыть +
+
+
+
+
+
+
+
+ +
+ Открыть +
+
+
+
+
+
+
+
+ +
+ Открыть +
+
+
+
+
+ + +
+
+ 04 +

With Author Info

+
+ +
+
+
+
+
+
+
А
+ Anna K. +
+ 1.2k +
+
+
+
+
+
+
+
+
М
+ Max P. +
+ 856 +
+
+
+
+
+
+
+
+
О
+ Olga S. +
+ 2.3k +
+
+
+
+
+
+
+
+
Д
+ Dmitry N. +
+ 445 +
+
+
+
+
+ + +
+
+ 05 +

CSS Grid Alternative

+
+

Использование CSS Grid с grid-row: span для контроля высоты.

+ +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ 06 +

Gap Sizes

+
+ +
+
+

gap-sm (8px)

+
+
+
+
+
+
+
+
+
+
+

gap-lg (24px)

+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ 07 +

Image Gallery

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ 08 +

Использование

+
+ +
+ 
<!-- CSS Columns Masonry -->
+<div class="masonry masonry--3">
+  <div class="masonry__item">...</div>
+  <div class="masonry__item">...</div>
+</div>
+
+/* Модификаторы колонок */
+.masonry--2   /* 2 колонки */
+.masonry--3   /* 3 колонки */
+.masonry--4   /* 4 колонки */
+.masonry--5   /* 5 колонок */
+
+/* Модификаторы отступов */
+.masonry--gap-sm   /* 8px */
+.masonry--gap-md   /* 16px (default) */
+.masonry--gap-lg   /* 24px */
+
+/* CSS Grid альтернатива */
+<div class="grid-masonry">
+  <div class="grid-item">...</div>
+  <div class="grid-item grid-item--tall">...</div>
+  <div class="grid-item grid-item--wide">...</div>
+</div>
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/modals.css b/skills/documatica-v12-design-system/references/modals.css new file mode 100644 index 00000000..e63b713c --- /dev/null +++ b/skills/documatica-v12-design-system/references/modals.css @@ -0,0 +1,777 @@ +/** + * Documatica Design System v12.0 + * Modal & Overlay Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + MODAL DEMO WRAPPER + ========================================================================= */ + +.modal-demo { + background: var(--color-slate-100); + border-radius: var(--radius-2xl); + padding: var(--spacing-8); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-demo--sm { + padding: var(--spacing-6); +} + +.modal-demo--xs { + padding: var(--spacing-4); +} + +.modals-row { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-6); +} + +/* ========================================================================= + MODAL + ========================================================================= */ + +.modal { + width: 100%; + max-width: 480px; + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-2xl); + overflow: hidden; +} + +.modal--sm { + max-width: 360px; +} + +.modal--md { + max-width: 480px; +} + +.modal--lg { + max-width: 640px; +} + +.modal--centered { + text-align: center; + padding: var(--spacing-8); +} + +.modal__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-5) var(--spacing-6); + border-bottom: 1px solid var(--color-slate-100); +} + +.modal__title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.modal__title--center { + margin-bottom: var(--spacing-2); +} + +.modal__close { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.modal__close svg { + width: 20px; + height: 20px; +} + +.modal__close:hover { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +.modal__body { + padding: var(--spacing-6); +} + +.modal__text { + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); +} + +.modal__text--center { + margin-bottom: var(--spacing-6); +} + +.modal__footer { + display: flex; + gap: var(--spacing-3); + padding: var(--spacing-5) var(--spacing-6); + background: var(--color-slate-50); + justify-content: flex-end; +} + +.modal__footer--center { + background: transparent; + justify-content: center; + padding: 0; +} + +.modal__icon { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto var(--spacing-4); + border-radius: var(--radius-full); +} + +.modal__icon svg { + width: 28px; + height: 28px; +} + +.modal__icon--success { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.modal__icon--danger { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +/* ========================================================================= + BUTTONS (inline for modals) + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2); + padding: var(--spacing-3) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-spring); +} + +.btn--primary { + background: var(--color-primary); + border: none; + color: var(--color-white); +} + +.btn--primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn--danger { + background: var(--color-danger); + border: none; + color: var(--color-white); +} + +.btn--danger:hover { + transform: translateY(-2px); +} + +.btn--ghost { + background: transparent; + border: none; + color: var(--color-slate-600); +} + +.btn--ghost:hover { + background: var(--color-slate-100); +} + +.btn--full { + flex: 1; +} + +/* ========================================================================= + FORM ELEMENTS (inline for modals) + ========================================================================= */ + +.form-group { + margin-bottom: var(--spacing-5); +} + +.form-group:last-child { + margin-bottom: 0; +} + +.form-label { + display: block; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-600); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-2); +} + +.form-input, +.form-select, +.form-textarea { + width: 100%; + padding: var(--spacing-3) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-base); + color: var(--color-dark); + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + outline: none; + border-color: var(--color-primary); +} + +.form-row { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-4); +} + +.checkbox-group { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.checkbox { + display: flex; + align-items: center; + gap: var(--spacing-3); + font-size: var(--font-size-base); + color: var(--color-dark); + cursor: pointer; +} + +.checkbox input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.checkbox__box { + width: 20px; + height: 20px; + background: var(--color-white); + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-md); + position: relative; + transition: var(--transition-base); +} + +.checkbox input:checked ~ .checkbox__box { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.checkbox__box::after { + content: ''; + position: absolute; + top: 2px; + left: 6px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg) scale(0); + transition: var(--transition-base); +} + +.checkbox input:checked ~ .checkbox__box::after { + transform: rotate(45deg) scale(1); +} + +/* ========================================================================= + SIZES DEMO + ========================================================================= */ + +.sizes-demo { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-6); +} + +.size-box { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.size-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-align: center; +} + +/* ========================================================================= + DRAWER + ========================================================================= */ + +.drawer-demo { + display: flex; + justify-content: flex-end; + background: var(--color-slate-100); + border-radius: var(--radius-2xl); + padding: var(--spacing-4); + min-height: 400px; +} + +.drawer { + width: 320px; + display: flex; + flex-direction: column; + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-xl); +} + +.drawer__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.drawer__title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.drawer__close { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.drawer__close svg { + width: 20px; + height: 20px; +} + +.drawer__close:hover { + background: var(--color-slate-100); +} + +.drawer__body { + flex: 1; + padding: var(--spacing-5); + overflow-y: auto; +} + +.drawer__footer { + display: flex; + gap: var(--spacing-3); + padding: var(--spacing-5); + border-top: 1px solid var(--color-slate-100); +} + +/* ========================================================================= + TOOLTIP + ========================================================================= */ + +.tooltips-row { + display: flex; + gap: var(--spacing-8); + justify-content: center; + padding: var(--spacing-16) 0; +} + +.tooltip-demo { + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + +.tooltip-trigger { + padding: var(--spacing-3) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + cursor: pointer; +} + +.tooltip { + position: absolute; + z-index: var(--z-tooltip); +} + +.tooltip__content { + display: block; + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-white); + background: var(--color-dark); + border-radius: var(--radius-lg); + white-space: nowrap; +} + +.tooltip--top { + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); +} + +.tooltip--bottom { + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); +} + +.tooltip--left { + right: calc(100% + 8px); + top: 50%; + transform: translateY(-50%); +} + +.tooltip--right { + left: calc(100% + 8px); + top: 50%; + transform: translateY(-50%); +} + +/* ========================================================================= + POPOVER + ========================================================================= */ + +.popover-demo { + display: flex; + justify-content: center; + padding: var(--spacing-6); +} + +.popover { + max-width: 300px; + padding: var(--spacing-4); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); +} + +.popover__header { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-bottom: var(--spacing-2); +} + +.popover__header svg { + width: 18px; + height: 18px; + color: var(--color-primary); +} + +.popover__title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.popover__text { + font-size: var(--font-size-sm); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); + margin-bottom: var(--spacing-3); +} + +.popover__link { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-decoration: none; +} + +.popover__link:hover { + text-decoration: underline; +} + +/* ========================================================================= + COMMAND PALETTE + ========================================================================= */ + +.command-palette { + width: 100%; + max-width: 560px; + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-2xl); + overflow: hidden; +} + +.command-palette__search { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-4) var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.command-palette__search svg { + width: 20px; + height: 20px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +.command-palette__input { + flex: 1; + padding: 0; + font-family: var(--font-family); + font-size: var(--font-size-lg); + color: var(--color-dark); + background: transparent; + border: none; + outline: none; +} + +.command-palette__input::placeholder { + color: var(--color-slate-400); +} + +.command-palette__kbd { + padding: var(--spacing-1) var(--spacing-2); + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xs); + color: var(--color-slate-500); + background: var(--color-slate-100); + border-radius: var(--radius-md); +} + +.command-palette__results { + padding: var(--spacing-3); + max-height: 300px; + overflow-y: auto; +} + +.command-palette__group { + margin-bottom: var(--spacing-3); +} + +.command-palette__group-label { + display: block; + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.command-palette__item { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3); + font-size: var(--font-size-base); + color: var(--color-dark); + text-decoration: none; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.command-palette__item svg { + width: 18px; + height: 18px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +.command-palette__item span { + flex: 1; +} + +.command-palette__item kbd { + padding: var(--spacing-1) var(--spacing-2); + font-family: 'SF Mono', monospace; + font-size: var(--font-size-xs); + color: var(--color-slate-400); + background: var(--color-slate-100); + border-radius: var(--radius-md); +} + +.command-palette__item:hover, +.command-palette__item--active { + background: var(--color-slate-100); +} + +.command-palette__item--active svg { + color: var(--color-primary); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .modals-row { + grid-template-columns: 1fr; + } + + .sizes-demo { + grid-template-columns: 1fr; + } + + .form-row { + grid-template-columns: 1fr; + } + + .tooltips-row { + flex-wrap: wrap; + } +} diff --git a/skills/documatica-v12-design-system/references/modals.html b/skills/documatica-v12-design-system/references/modals.html new file mode 100644 index 00000000..455b0735 --- /dev/null +++ b/skills/documatica-v12-design-system/references/modals.html @@ -0,0 +1,357 @@ + + + + + + Modals — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Overlay Protocol v12.0 +
+

+ Модалы +

+
+ + +
+

01. Basic Modal

+
+
+
+

Подтверждение действия

+ +
+
+

Вы уверены, что хотите выполнить это действие? Изменения нельзя будет отменить.

+
+
+ + +
+
+
+
+ + +
+

02. With Icon

+
+ + +
+
+
+ + + +
+

Успешно!

+

Документ успешно загружен и добавлен в архив.

+
+ +
+
+
+ + +
+
+
+ + + +
+

Удалить документ?

+

Это действие нельзя отменить. Документ будет удалён навсегда.

+
+ + +
+
+
+ +
+
+ + +
+

03. Form Modal

+
+
+
+

Новый документ

+ +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+

04. Sizes

+
+ + +
+ Small (360px) +
+
+
+

Малый модал

+
+
+

Компактное сообщение.

+
+
+
+
+ + +
+ Medium (480px) +
+
+
+

Средний модал

+
+
+

Стандартный размер.

+
+
+
+
+ + +
+ Large (640px) +
+
+
+

Большой модал

+
+
+

Для сложных форм.

+
+
+
+
+ +
+
+ + +
+

05. Drawer (Side Panel)

+
+
+
+

Фильтры

+ +
+
+
+ +
+ + + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+

06. Tooltips

+
+ +
+
+ Подсказка сверху +
+ +
+ +
+
+ Подсказка справа +
+ +
+ +
+
+ Подсказка снизу +
+ +
+ +
+
+ Подсказка слева +
+ +
+ +
+
+ + +
+

07. Popover

+
+
+
+ + + + AI Анализ +
+

Documatica использует нейросети для автоматического анализа документов и выявления потенциальных рисков.

+ Подробнее → +
+
+
+ + +
+

08. Command Palette

+
+
+
+ + + + + ESC +
+
+
+ Документы + + + + + Создать документ + Ctrl+N + + + + + + Загрузить документ + Ctrl+U + + + + + + Поиск в документах + Ctrl+F + +
+
+
+
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/navigation.css b/skills/documatica-v12-design-system/references/navigation.css new file mode 100644 index 00000000..e968e3ce --- /dev/null +++ b/skills/documatica-v12-design-system/references/navigation.css @@ -0,0 +1,819 @@ +/** + * Documatica Design System v12.0 + * Navigation Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + NAVBAR + ========================================================================= */ + +.navbar { + display: flex; + align-items: center; + gap: var(--spacing-6); + padding: var(--spacing-4) var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.navbar--dark { + background: var(--color-dark); + border-color: var(--color-dark); +} + +.navbar__logo { + display: flex; + align-items: center; + gap: var(--spacing-3); + text-decoration: none; +} + +.navbar__logo-icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: var(--radius-lg); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-black); + color: var(--color-white); +} + +.navbar__logo-icon--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.navbar__logo-text { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); +} + +.navbar--dark .navbar__logo-text { + color: var(--color-white); +} + +.navbar__menu { + display: flex; + gap: var(--spacing-1); + margin-left: auto; +} + +.navbar__link { + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-decoration: none; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.navbar__link:hover { + color: var(--color-dark); + background: var(--color-slate-100); +} + +.navbar__link--active { + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); +} + +.navbar--dark .navbar__link { + color: var(--color-slate-400); +} + +.navbar--dark .navbar__link:hover { + color: var(--color-white); + background: rgba(255, 255, 255, 0.1); +} + +.navbar--dark .navbar__link--active { + color: var(--color-white); + background: rgba(255, 255, 255, 0.15); +} + +.navbar__actions { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.navbar__btn--icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.navbar__btn--icon svg { + width: 22px; + height: 22px; +} + +.navbar__btn--icon:hover { + background: var(--color-slate-100); + color: var(--color-dark); +} + +.navbar__avatar { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-white); +} + +.navbar__btn-primary { + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-dark); + background: var(--color-smart); + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-spring); +} + +.navbar__btn-primary:hover { + transform: translateY(-2px); +} + +/* ========================================================================= + SIDEBAR + ========================================================================= */ + +.sidebar-demo { + display: flex; +} + +.sidebar { + width: 260px; + display: flex; + flex-direction: column; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; +} + +.sidebar__header { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.sidebar__logo { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: var(--radius-xl); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-white); +} + +.sidebar__title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); +} + +.sidebar__nav { + flex: 1; + padding: var(--spacing-4); +} + +.sidebar__section { + display: block; + padding: var(--spacing-3) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); +} + +.sidebar__link { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-3); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-slate-600); + text-decoration: none; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.sidebar__link svg { + width: 20px; + height: 20px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +.sidebar__link:hover { + background: var(--color-slate-100); + color: var(--color-dark); +} + +.sidebar__link:hover svg { + color: var(--color-primary); +} + +.sidebar__link--active { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.sidebar__link--active svg { + color: var(--color-primary); +} + +.sidebar__link--smart { + background: rgba(251, 191, 36, 0.1); + color: #b45309; +} + +.sidebar__link--smart svg { + color: var(--color-smart); +} + +.sidebar__badge { + margin-left: auto; + padding: 2px var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-white); + background: var(--color-primary); + border-radius: var(--radius-full); +} + +.sidebar__dot { + width: 8px; + height: 8px; + margin-left: auto; + background: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); +} + +.sidebar__footer { + padding: var(--spacing-4); + border-top: 1px solid var(--color-slate-100); +} + +.sidebar__user { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-2); +} + +.sidebar__user-avatar { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-200); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.sidebar__user-info { + display: flex; + flex-direction: column; +} + +.sidebar__user-name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.sidebar__user-role { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + TABS + ========================================================================= */ + +.tabs-demo { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + padding: var(--spacing-4); +} + +.tabs { + display: flex; + gap: var(--spacing-1); +} + +/* Underline Tabs */ +.tabs--underline { + border-bottom: 2px solid var(--color-slate-200); + padding-bottom: 0; + gap: 0; +} + +.tabs__item { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-3) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: transparent; + border: none; + cursor: pointer; + position: relative; + transition: var(--transition-base); +} + +.tabs__item svg { + width: 18px; + height: 18px; +} + +.tabs__item:hover { + color: var(--color-dark); +} + +.tabs__item--active { + color: var(--color-primary); +} + +.tabs__item--active::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + background: var(--color-primary); +} + +/* Pill Tabs */ +.tabs--pills { + gap: var(--spacing-2); +} + +.tabs__pill { + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: transparent; + border: none; + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-base); +} + +.tabs__pill:hover { + background: var(--color-slate-100); + color: var(--color-dark); +} + +.tabs__pill--active { + background: var(--color-primary); + color: var(--color-white); +} + +/* Boxed Tabs */ +.tabs--boxed { + background: var(--color-slate-100); + border-radius: var(--radius-lg); + padding: var(--spacing-1); + gap: 0; +} + +.tabs__box { + flex: 1; + padding: var(--spacing-2) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + background: transparent; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: var(--transition-base); +} + +.tabs__box:hover { + color: var(--color-dark); +} + +.tabs__box--active { + background: var(--color-white); + color: var(--color-dark); + box-shadow: var(--shadow-sm); +} + +/* ========================================================================= + BREADCRUMBS + ========================================================================= */ + +.breadcrumbs { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.breadcrumbs__item { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + text-decoration: none; + transition: var(--transition-base); +} + +.breadcrumbs__item svg { + width: 18px; + height: 18px; +} + +.breadcrumbs__item:hover { + color: var(--color-primary); +} + +.breadcrumbs__item--current { + color: var(--color-dark); + font-weight: var(--font-weight-bold); +} + +.breadcrumbs__separator { + color: var(--color-slate-300); +} + +/* Pill Breadcrumbs */ +.breadcrumbs--pills { + gap: var(--spacing-1); +} + +.breadcrumbs__pill { + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + text-decoration: none; + background: var(--color-slate-100); + border-radius: var(--radius-md); + transition: var(--transition-base); +} + +.breadcrumbs__pill:hover { + background: var(--color-slate-200); + color: var(--color-dark); +} + +.breadcrumbs__pill--active { + background: var(--color-primary); + color: var(--color-white); +} + +.breadcrumbs__chevron { + width: 14px; + height: 14px; + color: var(--color-slate-300); +} + +/* ========================================================================= + PAGINATION + ========================================================================= */ + +.pagination { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.pagination--compact { + gap: var(--spacing-4); +} + +.pagination__btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + color: var(--color-slate-500); + cursor: pointer; + transition: var(--transition-base); +} + +.pagination__btn svg { + width: 20px; + height: 20px; +} + +.pagination__btn:hover:not(:disabled) { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination__btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.pagination__page { + display: flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + padding: 0 var(--spacing-3); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.pagination__page:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination__page--active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.pagination__dots { + padding: 0 var(--spacing-2); + color: var(--color-slate-400); +} + +.pagination__info { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-slate-600); +} + +/* ========================================================================= + STEPS + ========================================================================= */ + +.steps { + display: flex; + align-items: flex-start; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-3); +} + +.step__circle { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-200); + border-radius: var(--radius-full); + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-500); +} + +.step__circle svg { + width: 20px; + height: 20px; +} + +.step--active .step__circle { + background: var(--color-primary); + color: var(--color-white); +} + +.step--completed .step__circle { + background: var(--color-success); + color: var(--color-white); +} + +.step__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-align: center; +} + +.step--active .step__label { + color: var(--color-primary); +} + +.step--completed .step__label { + color: var(--color-success); +} + +.step__line { + flex: 1; + height: 2px; + background: var(--color-slate-200); + margin-top: 20px; + min-width: 60px; +} + +.step__line--active { + background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary) 100%); +} + +.step__line--completed { + background: var(--color-success); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .navbar { + flex-wrap: wrap; + } + + .navbar__menu { + order: 3; + width: 100%; + justify-content: center; + margin-top: var(--spacing-3); + } + + .sidebar { + width: 100%; + } + + .steps { + flex-wrap: wrap; + justify-content: center; + } + + .step__line { + display: none; + } +} diff --git a/skills/documatica-v12-design-system/references/navigation.html b/skills/documatica-v12-design-system/references/navigation.html new file mode 100644 index 00000000..736411f5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/navigation.html @@ -0,0 +1,320 @@ + + + + + + Navigation — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Navigation Protocol v12.0 +
+

+ Навигация +

+
+ + +
+

01. Navbar

+ + + + + + + +
+ + +
+

02. Sidebar

+
+ + + + +
+
+ + +
+

03. Tabs

+ + +
+
+ + + + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + + +
+
+ +
+ + +
+

04. Breadcrumbs

+ + + + + + +
+ + +
+

05. Pagination

+ + + + + + +
+ + +
+

06. Steps

+ +
+
+
+ + + +
+ Загрузка +
+
+
+
+ + + +
+ AI Анализ +
+
+
+
3
+ Проверка +
+
+
+
4
+ Готово +
+
+ +
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/pagination.css b/skills/documatica-v12-design-system/references/pagination.css new file mode 100644 index 00000000..a087d4da --- /dev/null +++ b/skills/documatica-v12-design-system/references/pagination.css @@ -0,0 +1,604 @@ +/** + * UI Kit v12.0 — Pagination + * Page navigation components + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1000px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 64px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-100); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + DEMO + ========================================================================= */ + +.demo-stack { + display: flex; + flex-direction: column; + gap: 32px; +} + +.demo-item { + display: flex; + flex-direction: column; + gap: 12px; +} + +.demo-label { + font-size: 13px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0; +} + +.dark-box { + background: var(--color-dark); + border-radius: 16px; + padding: 32px; +} + +/* ========================================================================= + PAGINATION BASE + ========================================================================= */ + +.pagination { + display: flex; + align-items: center; + gap: 4px; +} + +.pagination__btn { + display: flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + padding: 0 12px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 10px; + color: var(--color-slate-600); + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: all 0.2s ease; + cursor: pointer; +} + +.pagination__btn:hover { + background: var(--color-slate-50); + border-color: var(--color-slate-300); + color: var(--color-dark); +} + +.pagination__btn--active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.pagination__btn--active:hover { + background: #2563eb; + border-color: #2563eb; + color: var(--color-white); +} + +.pagination__btn--nav { + color: var(--color-slate-400); +} + +.pagination__btn[aria-disabled="true"] { + opacity: 0.4; + pointer-events: none; +} + +.pagination__btn--text { + gap: 6px; + padding: 0 16px; +} + +.pagination__ellipsis { + display: flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + color: var(--color-slate-400); + font-size: 14px; +} + +/* ========================================================================= + SIZE VARIANTS + ========================================================================= */ + +.pagination--sm .pagination__btn { + min-width: 32px; + height: 32px; + padding: 0 8px; + font-size: 12px; + border-radius: 8px; +} + +.pagination--sm .pagination__ellipsis { + min-width: 32px; + height: 32px; +} + +.pagination--lg .pagination__btn { + min-width: 48px; + height: 48px; + padding: 0 16px; + font-size: 16px; + border-radius: 12px; +} + +.pagination--lg .pagination__ellipsis { + min-width: 48px; + height: 48px; +} + +/* ========================================================================= + SHAPE VARIANTS + ========================================================================= */ + +.pagination--pill .pagination__btn { + border-radius: 100px; +} + +.pagination--square .pagination__btn { + border-radius: 0; +} + +/* ========================================================================= + STYLE VARIANTS + ========================================================================= */ + +/* Outlined */ +.pagination--outlined .pagination__btn { + background: transparent; +} + +.pagination--outlined .pagination__btn:hover { + background: var(--color-slate-50); +} + +.pagination--outlined .pagination__btn--active { + background: transparent; + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination--outlined .pagination__btn--active:hover { + background: rgba(59, 130, 246, 0.05); +} + +/* Ghost */ +.pagination--ghost .pagination__btn { + background: transparent; + border-color: transparent; +} + +.pagination--ghost .pagination__btn:hover { + background: var(--color-slate-100); +} + +.pagination--ghost .pagination__btn--active { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +/* Minimal */ +.pagination--minimal .pagination__btn { + background: transparent; + border-color: transparent; + min-width: 32px; +} + +.pagination--minimal .pagination__btn:hover { + color: var(--color-primary); +} + +.pagination--minimal .pagination__btn--active { + background: transparent; + color: var(--color-primary); + font-weight: 700; +} + +/* ========================================================================= + DARK THEME + ========================================================================= */ + +.pagination--dark .pagination__btn { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.15); + color: var(--color-slate-300); +} + +.pagination--dark .pagination__btn:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.25); + color: var(--color-white); +} + +.pagination--dark .pagination__btn--active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.pagination--dark .pagination__ellipsis { + color: var(--color-slate-500); +} + +/* ========================================================================= + PAGINATION WRAPPER + ========================================================================= */ + +.pagination-wrapper { + display: flex; + align-items: center; + gap: 24px; + flex-wrap: wrap; +} + +.pagination-wrapper--between { + justify-content: space-between; +} + +.pagination-info { + font-size: 14px; + color: var(--color-slate-500); +} + +/* Per page */ +.per-page { + display: flex; + align-items: center; + gap: 8px; +} + +.per-page__label { + font-size: 14px; + color: var(--color-slate-500); +} + +.per-page__select { + padding: 8px 12px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 8px; + font-size: 14px; + color: var(--color-dark); + cursor: pointer; +} + +.per-page__select:focus { + outline: none; + border-color: var(--color-primary); +} + +/* Go to */ +.go-to { + display: flex; + align-items: center; + gap: 8px; +} + +.go-to__label { + font-size: 14px; + color: var(--color-slate-500); +} + +.go-to__input { + width: 64px; + padding: 8px 12px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 8px; + font-size: 14px; + text-align: center; +} + +.go-to__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.go-to__btn { + padding: 8px 16px; + background: var(--color-primary); + border: none; + border-radius: 8px; + color: var(--color-white); + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s ease; +} + +.go-to__btn:hover { + background: #2563eb; +} + +/* ========================================================================= + SIMPLE PAGINATION + ========================================================================= */ + +.pagination-simple { + display: flex; + justify-content: space-between; + gap: 24px; +} + +.pagination-simple__link { + display: flex; + align-items: center; + gap: 16px; + padding: 20px 24px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + text-decoration: none; + transition: all 0.2s ease; + flex: 1; + max-width: 48%; +} + +.pagination-simple__link:hover { + border-color: var(--color-primary); + box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1); +} + +.pagination-simple__link--prev { + justify-content: flex-start; +} + +.pagination-simple__link--next { + justify-content: flex-end; + text-align: right; +} + +.pagination-simple__link svg { + color: var(--color-slate-400); + flex-shrink: 0; + transition: all 0.2s ease; +} + +.pagination-simple__link:hover svg { + color: var(--color-primary); +} + +.pagination-simple__link--prev:hover svg { + transform: translateX(-4px); +} + +.pagination-simple__link--next:hover svg { + transform: translateX(4px); +} + +.pagination-simple__content { + display: flex; + flex-direction: column; + gap: 4px; +} + +.pagination-simple__content small { + font-size: 12px; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.pagination-simple__content strong { + font-size: 15px; + font-weight: 600; + color: var(--color-dark); +} + +.pagination-simple__link:hover .pagination-simple__content strong { + color: var(--color-primary); +} + +/* ========================================================================= + COMPACT PAGINATION + ========================================================================= */ + +.pagination-compact { + display: flex; + align-items: center; + gap: 16px; +} + +.pagination-compact__btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 10px; + color: var(--color-slate-600); + text-decoration: none; + transition: all 0.2s ease; +} + +.pagination-compact__btn:hover { + background: var(--color-slate-50); + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination-compact__info { + font-size: 14px; + color: var(--color-slate-500); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .pagination-wrapper { + flex-direction: column; + align-items: flex-start; + } + + .pagination-wrapper--between { + gap: 16px; + } + + .pagination-simple { + flex-direction: column; + } + + .pagination-simple__link { + max-width: 100%; + } + + .pagination { + flex-wrap: wrap; + } +} diff --git a/skills/documatica-v12-design-system/references/pagination.html b/skills/documatica-v12-design-system/references/pagination.html new file mode 100644 index 00000000..0eb4136f --- /dev/null +++ b/skills/documatica-v12-design-system/references/pagination.html @@ -0,0 +1,506 @@ + + + + + + Pagination — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ NAVIGATION +

Pagination

+

Компоненты постраничной навигации. Поддержка разных размеров, стилей и состояний.

+
+ + +
+
+ 01 +

Basic Pagination

+
+ + +
+ + +
+
+ 02 +

With Ellipsis

+
+ + +
+ + +
+
+ 03 +

With Text Labels

+
+ + +
+ + +
+
+ 04 +

Size Variants

+
+ +
+
+

Small

+ +
+ +
+

Medium (default)

+ +
+ +
+

Large

+ +
+
+
+ + +
+
+ 05 +

Shape Variants

+
+ +
+
+

Default (rounded)

+ +
+ +
+

Pill

+ +
+ +
+

Square

+ +
+
+
+ + +
+
+ 06 +

Style Variants

+
+ +
+
+

Outlined

+ +
+ +
+

Ghost

+ +
+ +
+

Minimal

+ +
+
+
+ + +
+
+ 07 +

Dark Theme

+
+ +
+ +
+
+ + +
+
+ 08 +

With Page Info

+
+ +
+ Показано 1-10 из 248 + +
+
+ + +
+
+ 09 +

With Per Page Selector

+
+ +
+
+ + +
+ + + + Страница 2 из 10 +
+
+ + +
+
+ 10 +

With Go To Page

+
+ +
+ + +
+ + + +
+
+
+ + +
+
+ 11 +

Simple Previous / Next

+
+ + +
+ + +
+
+ 12 +

Compact / Mobile

+
+ +
+ +
+
+ + +
+
+ 13 +

Использование

+
+ +
+ 
<nav class="pagination">
+  <a class="pagination__btn pagination__btn--nav">←</a>
+  <a class="pagination__btn pagination__btn--active">1</a>
+  <a class="pagination__btn">2</a>
+  <span class="pagination__ellipsis">...</span>
+  <a class="pagination__btn">10</a>
+  <a class="pagination__btn pagination__btn--nav">→</a>
+</nav>
+
+/* Размеры */
+.pagination--sm    /* Small */
+.pagination--lg    /* Large */
+
+/* Формы */
+.pagination--pill     /* Круглые */
+.pagination--square   /* Квадратные */
+
+/* Стили */
+.pagination--outlined  /* С рамкой */
+.pagination--ghost     /* Прозрачные */
+.pagination--minimal   /* Минимальные */
+.pagination--dark      /* Тёмная тема */
+
+/* Обёртки */
+.pagination-wrapper
+.pagination-simple
+.pagination-compact
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/pricing.css b/skills/documatica-v12-design-system/references/pricing.css new file mode 100644 index 00000000..c4c6196c --- /dev/null +++ b/skills/documatica-v12-design-system/references/pricing.css @@ -0,0 +1,665 @@ +/** + * Documatica Design System v12.0 + * Pricing Table Components + */ + +.container { + max-width: 1000px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + PRICING GRID + ========================================================================= */ + +.pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-6); +} + +.pricing-grid--2 { + grid-template-columns: repeat(2, 1fr); + max-width: 600px; + margin: 0 auto; +} + +/* ========================================================================= + PRICING CARD + ========================================================================= */ + +.pricing-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + transition: var(--transition-spring); +} + +.pricing-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.pricing-card--featured { + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary); +} + +.pricing-card--compact { + padding: var(--spacing-6); +} + +.pricing-card__badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + padding: var(--spacing-1) var(--spacing-4); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border-radius: var(--radius-full); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.pricing-card__header { + margin-bottom: var(--spacing-6); +} + +.pricing-card__name { + margin: 0 0 var(--spacing-1); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.pricing-card__desc { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.pricing-card__price { + display: flex; + align-items: baseline; + gap: var(--spacing-1); + margin-bottom: var(--spacing-6); +} + +.price-amount { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.price-amount--smart { + color: var(--color-smart); +} + +.price-period { + font-size: var(--font-size-base); + color: var(--color-slate-400); +} + +/* ========================================================================= + FEATURES LIST + ========================================================================= */ + +.pricing-card__features { + list-style: none; + padding: 0; + margin: 0 0 var(--spacing-8); + flex: 1; +} + +.feature { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) 0; + font-size: var(--font-size-sm); + color: var(--color-slate-600); + border-bottom: 1px solid var(--color-slate-100); +} + +.feature:last-child { + border-bottom: none; +} + +.feature svg { + width: 20px; + height: 20px; + color: var(--color-success); + flex-shrink: 0; +} + +.feature--disabled { + color: var(--color-slate-400); +} + +.feature--disabled svg { + color: var(--color-slate-300); +} + +/* ========================================================================= + PRICING BUTTON + ========================================================================= */ + +.pricing-card__btn { + width: 100%; + padding: var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + background: var(--color-slate-100); + border: none; + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-spring); +} + +.pricing-card__btn:hover { + background: var(--color-slate-200); +} + +.pricing-card__btn--primary { + color: var(--color-white); + background: var(--color-primary); +} + +.pricing-card__btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.pricing-card__btn--smart { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2); + color: var(--color-dark); + background: var(--color-smart); +} + +.pricing-card__btn--smart svg { + width: 20px; + height: 20px; +} + +.pricing-card__btn--smart:hover { + box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4); +} + +.pricing-card__btn--sm { + width: auto; + padding: var(--spacing-3) var(--spacing-6); +} + +/* ========================================================================= + TOGGLE + ========================================================================= */ + +.pricing-toggle-wrapper { + display: flex; + justify-content: center; + margin-bottom: var(--spacing-8); +} + +.pricing-toggle { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-2) var(--spacing-4); + background: var(--color-slate-100); + border-radius: var(--radius-full); +} + +.toggle-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); +} + +.toggle-label--active { + color: var(--color-dark); +} + +.toggle-switch { + position: relative; + width: 48px; + height: 28px; + background: var(--color-slate-300); + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-base); +} + +.toggle-switch:hover { + background: var(--color-primary); +} + +.toggle-knob { + position: absolute; + top: 4px; + left: 4px; + width: 20px; + height: 20px; + background: var(--color-white); + border-radius: var(--radius-full); + box-shadow: var(--shadow-sm); + transition: var(--transition-base); +} + +.toggle-badge { + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-success); + background: rgba(16, 185, 129, 0.1); + border-radius: var(--radius-full); +} + +/* ========================================================================= + HORIZONTAL PRICING + ========================================================================= */ + +.pricing-horizontal { + display: flex; + align-items: center; + gap: var(--spacing-6); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + margin-bottom: var(--spacing-4); + transition: var(--transition-base); +} + +.pricing-horizontal:hover { + border-color: var(--color-primary); +} + +.pricing-horizontal--featured { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.02); +} + +.pricing-horizontal__info { + flex: 1; +} + +.pricing-horizontal__info h3 { + margin: 0 0 var(--spacing-1); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.pricing-horizontal__info p { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.inline-badge { + display: inline-flex; + padding: 2px 8px; + font-size: 10px; + font-weight: var(--font-weight-bold); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-full); + margin-left: var(--spacing-2); + text-transform: uppercase; + vertical-align: middle; +} + +.pricing-horizontal__features { + display: flex; + gap: var(--spacing-4); +} + +.pricing-horizontal__features span { + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + background: var(--color-slate-100); + border-radius: var(--radius-lg); +} + +.pricing-horizontal__action { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.pricing-horizontal__action .price-amount { + font-size: var(--font-size-xl); +} + +/* ========================================================================= + DARK AI PRICING + ========================================================================= */ + +.pricing-card--dark { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +.pricing-card--dark .pricing-card__name { + color: var(--color-white); +} + +.pricing-card--dark .pricing-card__desc { + color: var(--color-slate-400); +} + +.pricing-card--dark .price-amount { + color: var(--color-white); +} + +.pricing-card--dark .price-period { + color: var(--color-slate-500); +} + +.pricing-card--ai { + padding: var(--spacing-12); + text-align: center; + overflow: hidden; +} + +.pricing-card__glow { + position: absolute; + top: -100px; + left: 50%; + transform: translateX(-50%); + width: 300px; + height: 300px; + background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%); + pointer-events: none; +} + +.pricing-card__ai-badge { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-smart); + background: rgba(251, 191, 36, 0.15); + border-radius: var(--radius-full); + margin-bottom: var(--spacing-6); +} + +.pricing-card__ai-badge svg { + width: 18px; + height: 18px; +} + +.pricing-card__ai-features { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-4); + margin: var(--spacing-8) 0; + text-align: left; +} + +.ai-feature { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-slate-300); + background: var(--color-slate-800); + border-radius: var(--radius-lg); +} + +.ai-feature svg { + width: 20px; + height: 20px; + color: var(--color-smart); + flex-shrink: 0; +} + +/* ========================================================================= + COMPARISON TABLE + ========================================================================= */ + +.pricing-comparison { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; +} + +.comparison-header { + display: grid; + grid-template-columns: 2fr repeat(3, 1fr); + background: var(--color-slate-50); + border-bottom: 1px solid var(--color-slate-200); +} + +.comparison-row { + display: grid; + grid-template-columns: 2fr repeat(3, 1fr); + border-bottom: 1px solid var(--color-slate-100); +} + +.comparison-row:last-child { + border-bottom: none; +} + +.comparison-row--footer { + padding: var(--spacing-4) 0; + background: var(--color-slate-50); +} + +.comparison-cell { + padding: var(--spacing-4) var(--spacing-5); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + text-align: center; +} + +.comparison-cell--feature { + font-weight: var(--font-weight-medium); + color: var(--color-dark); + text-align: left; +} + +.comparison-cell--featured { + background: rgba(59, 130, 246, 0.03); +} + +.comparison-header .comparison-cell { + font-weight: var(--font-weight-bold); + color: var(--color-dark); + text-transform: uppercase; + font-size: var(--font-size-xs); + letter-spacing: var(--tracking-wider); +} + +.check-yes { + width: 24px; + height: 24px; + color: var(--color-success); +} + +.check-no { + width: 24px; + height: 24px; + color: var(--color-slate-300); +} + +.comparison-btn { + padding: var(--spacing-2) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + background: var(--color-white); + border: 1px solid var(--color-slate-300); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.comparison-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.comparison-btn--primary { + color: var(--color-white); + background: var(--color-primary); + border-color: var(--color-primary); +} + +.comparison-btn--primary:hover { + background: #2563eb; +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .pricing-grid { + grid-template-columns: 1fr; + } + + .pricing-grid--2 { + grid-template-columns: 1fr; + } + + .pricing-horizontal { + flex-direction: column; + text-align: center; + } + + .pricing-horizontal__features { + flex-wrap: wrap; + justify-content: center; + } + + .pricing-horizontal__action { + flex-direction: column; + } + + .pricing-card__ai-features { + grid-template-columns: 1fr; + } + + .pricing-comparison { + overflow-x: auto; + } + + .comparison-header, + .comparison-row { + min-width: 600px; + } +} diff --git a/skills/documatica-v12-design-system/references/pricing.html b/skills/documatica-v12-design-system/references/pricing.html new file mode 100644 index 00000000..b2d8ff47 --- /dev/null +++ b/skills/documatica-v12-design-system/references/pricing.html @@ -0,0 +1,313 @@ + + + + + + Pricing Table — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Pricing Protocol v12.0 +
+

+ Pricing Table +

+
+ + +
+

01. Basic 3-Column

+
+
+
+

Starter

+

Для небольших команд

+
+
+ ₽1,990 + /месяц +
+
    +
  • + + До 5 пользователей +
    • +
  • + + 10 ГБ хранилища +
    • +
  • + + Базовая аналитика +
    • +
  • + + AI функции +
    • +
+ +
+ +
+
Популярный
+
+

Professional

+

Для растущих компаний

+
+
+ ₽4,990 + /месяц +
+
    +
  • + + До 20 пользователей +
    • +
  • + + 100 ГБ хранилища +
    • +
  • + + Расширенная аналитика +
    • +
  • + + AI анализ документов +
    • +
+ +
+ +
+
+

Enterprise

+

Для крупного бизнеса

+
+
+ Custom +
+
    +
  • + + Неограниченные пользователи +
    • +
  • + + Неограниченное хранилище +
    • +
  • + + Персональный менеджер +
    • +
  • + + SLA 99.99% +
    • +
+ +
+
+
+ + +
+

02. With Monthly/Annual Toggle

+
+
+ Месяц +
+
+
+ Год + -20% +
+
+
+
+

Basic

+
+ ₽990 + /месяц +
+

Всё необходимое для старта

+ +
+
+
Лучшее
+

Pro

+
+ ₽2,490 + /месяц +
+

Максимальные возможности

+ +
+
+
+ + +
+

03. Horizontal Pricing

+
+
+

Starter Plan

+

Идеально для фрилансеров и небольших проектов

+
+
+ 5 проектов + 10 ГБ + Email поддержка +
+
+ ₽990 + +
+
+
+
+

Pro Plan Рекомендуем

+

Для команд и агентств

+
+
+ ∞ проектов + 100 ГБ + 24/7 поддержка +
+
+ ₽2,990 + +
+
+
+ + +
+

04. Dark AI Pricing

+
+
+
+ + AI Powered +
+

Documatica AI

+

Полный набор AI-инструментов для документооборота

+
+ ₽9,990 + /месяц +
+
+
+ + Умный анализ документов +
+
+ + Автоматическая классификация +
+
+ + Извлечение данных (OCR) +
+
+ + Семантический поиск +
+
+ +
+
+ + +
+

05. Feature Comparison Table

+
+
+
Функции
+
Starter
+
Pro
+
Enterprise
+
+
+
Пользователи
+
5
+
20
+
Unlimited
+
+
+
Хранилище
+
10 ГБ
+
100 ГБ
+
1 ТБ+
+
+
+
AI анализ
+
+ +
+
+ +
+
+ +
+
+
+
API доступ
+
+ +
+
+ +
+
+ +
+
+
+
Поддержка
+
Email
+
Приоритет
+
Выделенная
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/product.css b/skills/documatica-v12-design-system/references/product.css new file mode 100644 index 00000000..e328fb14 --- /dev/null +++ b/skills/documatica-v12-design-system/references/product.css @@ -0,0 +1,962 @@ +/** + * UI Kit v12.0 — Product Page + * Product cards, galleries, details + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +.btn--full { + width: 100%; +} + +.btn--icon { + width: 56px; + height: 56px; + padding: 0; +} + +/* ========================================================================= + PRODUCT CARDS + ========================================================================= */ + +.cards-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.product-card { + position: relative; + background: var(--color-white); + border-radius: 24px; + overflow: hidden; + transition: all 0.3s ease; +} + +.product-card:hover { + transform: translateY(-8px); + box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1); +} + +.product-card__badge { + position: absolute; + top: 16px; + left: 16px; + padding: 8px 14px; + background: var(--color-dark); + border-radius: 10px; + font-size: 11px; + font-weight: 700; + color: var(--color-white); + letter-spacing: 0.1em; + z-index: 2; +} + +.product-card__badge--sale { + background: #dc2626; +} + +.product-card__image { + position: relative; + aspect-ratio: 1; + background: var(--color-slate-50); + overflow: hidden; +} + +.product-card__image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s ease; +} + +.product-card:hover .product-card__image img { + transform: scale(1.05); +} + +.product-card__fav { + position: absolute; + top: 16px; + right: 16px; + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: none; + border-radius: 50%; + color: var(--color-slate-400); + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; +} + +.product-card__fav:hover { + color: #dc2626; + transform: scale(1.1); +} + +.product-card__fav--active { + color: #dc2626; +} + +.product-card__body { + padding: 24px; +} + +.product-card__category { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.15em; + margin-bottom: 8px; +} + +.product-card__title { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 12px 0; + line-height: 1.3; +} + +.product-card__prices { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; +} + +.product-card__price { + font-size: 22px; + font-weight: 900; + color: var(--color-dark); + margin-bottom: 20px; +} + +.product-card__prices .product-card__price { + margin-bottom: 0; +} + +.product-card__old-price { + font-size: 16px; + color: var(--color-slate-400); + text-decoration: line-through; +} + +/* ========================================================================= + PRODUCT DETAIL + ========================================================================= */ + +.product-detail { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + background: var(--color-white); + border-radius: 32px; + padding: 40px; +} + +.product-gallery__main { + position: relative; + aspect-ratio: 1; + background: var(--color-slate-50); + border-radius: 24px; + overflow: hidden; +} + +.product-gallery__main img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-gallery__zoom { + position: absolute; + bottom: 16px; + right: 16px; + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border-radius: 12px; + color: var(--color-slate-500); + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.product-gallery__thumbs { + display: flex; + gap: 12px; + margin-top: 16px; +} + +.product-gallery__thumb { + width: 80px; + height: 80px; + padding: 0; + border: 2px solid transparent; + border-radius: 16px; + overflow: hidden; + cursor: pointer; + opacity: 0.6; + transition: all 0.2s ease; +} + +.product-gallery__thumb--active, +.product-gallery__thumb:hover { + opacity: 1; + border-color: var(--color-primary); +} + +.product-gallery__thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-info__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-success); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.product-info__title { + font-size: 42px; + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 8px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.product-info__title span { + color: var(--color-primary); +} + +.product-info__sku { + font-size: 13px; + color: var(--color-slate-400); + margin: 0 0 20px 0; + font-family: 'SF Mono', monospace; +} + +.product-info__rating { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; +} + +.rating-stars { + color: var(--color-smart); + font-size: 16px; +} + +.rating-text { + font-size: 14px; + color: var(--color-slate-500); +} + +.product-info__price-block { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 20px; +} + +.product-info__price { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); +} + +.product-info__old-price { + font-size: 20px; + color: var(--color-slate-400); + text-decoration: line-through; +} + +.product-info__discount { + padding: 6px 12px; + background: rgba(220, 38, 38, 0.1); + border-radius: 8px; + font-size: 14px; + font-weight: 700; + color: #dc2626; +} + +.product-info__desc { + font-size: 16px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0 0 28px 0; +} + +/* Product Options */ +.product-options { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 28px; +} + +.product-option__label { + display: block; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin-bottom: 12px; +} + +.color-swatches { + display: flex; + gap: 10px; +} + +.color-swatch { + width: 36px; + height: 36px; + border: 3px solid var(--color-slate-200); + border-radius: 50%; + cursor: pointer; + transition: all 0.2s ease; +} + +.color-swatch--active, +.color-swatch:hover { + border-color: var(--color-primary); + transform: scale(1.1); +} + +.size-buttons { + display: flex; + gap: 10px; +} + +.size-btn { + min-width: 48px; + height: 48px; + padding: 0 16px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 12px; + font-family: inherit; + font-size: 14px; + font-weight: 700; + color: var(--color-dark); + cursor: pointer; + transition: all 0.2s ease; +} + +.size-btn--active, +.size-btn:hover { + background: var(--color-primary); + color: var(--color-white); +} + +/* Product Actions */ +.product-actions { + display: flex; + gap: 12px; + margin-bottom: 28px; +} + +.quantity-selector { + display: flex; + align-items: center; + background: var(--color-slate-100); + border-radius: 14px; + overflow: hidden; +} + +.quantity-btn { + width: 48px; + height: 56px; + background: transparent; + border: none; + font-size: 20px; + font-weight: 600; + color: var(--color-slate-500); + cursor: pointer; + transition: color 0.2s ease; +} + +.quantity-btn:hover { + color: var(--color-dark); +} + +.quantity-input { + width: 48px; + height: 56px; + background: transparent; + border: none; + text-align: center; + font-family: inherit; + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +.quantity-input::-webkit-inner-spin-button { + display: none; +} + +/* Product Meta */ +.product-meta { + display: flex; + flex-direction: column; + gap: 12px; + padding-top: 24px; + border-top: 1px solid var(--color-slate-100); +} + +.product-meta__item { + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; + color: var(--color-slate-500); +} + +.product-meta__item svg { + color: var(--color-primary); +} + +/* ========================================================================= + SPECIFICATIONS + ========================================================================= */ + +.specs-card { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; + background: var(--color-white); + border-radius: 24px; + padding: 32px; +} + +.specs-group__title { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.15em; + margin: 0 0 20px 0; +} + +.specs-table { + width: 100%; + border-collapse: collapse; +} + +.specs-table tr { + border-bottom: 1px solid var(--color-slate-100); +} + +.specs-table tr:last-child { + border-bottom: none; +} + +.specs-table td { + padding: 14px 0; + font-size: 14px; +} + +.specs-table td:first-child { + color: var(--color-slate-400); + width: 45%; +} + +.specs-table td:last-child { + color: var(--color-dark); + font-weight: 600; +} + +/* ========================================================================= + PRODUCT HORIZONTAL + ========================================================================= */ + +.product-horizontal { + display: flex; + gap: 32px; + background: var(--color-white); + border-radius: 24px; + padding: 24px; + align-items: center; +} + +.product-horizontal__image { + width: 200px; + height: 200px; + flex-shrink: 0; + border-radius: 20px; + overflow: hidden; + background: var(--color-slate-50); +} + +.product-horizontal__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-horizontal__content { + flex: 1; +} + +.product-horizontal__category { + font-size: 11px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; +} + +.product-horizontal__title { + font-size: 28px; + font-weight: 900; + color: var(--color-dark); + margin: 8px 0 12px 0; + text-transform: uppercase; + letter-spacing: -0.01em; +} + +.product-horizontal__desc { + font-size: 15px; + color: var(--color-slate-500); + margin: 0 0 20px 0; + max-width: 400px; +} + +.product-horizontal__footer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.product-horizontal__price { + font-size: 28px; + font-weight: 900; + color: var(--color-dark); +} + +.product-horizontal__actions { + display: flex; + gap: 12px; +} + +/* ========================================================================= + QUICK VIEW + ========================================================================= */ + +.quick-view { + display: flex; + background: var(--color-white); + border-radius: 28px; + overflow: hidden; + box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); +} + +.quick-view__image { + width: 45%; + background: var(--color-slate-50); +} + +.quick-view__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.quick-view__content { + flex: 1; + padding: 40px; + position: relative; +} + +.quick-view__close { + position: absolute; + top: 24px; + right: 24px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 50%; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.quick-view__close:hover { + background: var(--color-slate-200); + color: var(--color-dark); +} + +.quick-view__badge { + font-size: 11px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; +} + +.quick-view__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 12px 0 20px 0; + text-transform: uppercase; +} + +.quick-view__title span { + color: var(--color-primary); +} + +.quick-view__price { + font-size: 32px; + font-weight: 900; + color: var(--color-dark); + margin-bottom: 24px; +} + +.quick-view__colors { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 28px; +} + +.quick-view__label { + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; +} + +.quick-view__link { + display: block; + margin-top: 16px; + text-align: center; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + transition: color 0.2s ease; +} + +.quick-view__link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + STATUS BADGES + ========================================================================= */ + +.status-demo { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.status-badge { + display: inline-block; + padding: 8px 16px; + background: var(--color-slate-100); + border-radius: 10px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-600); + letter-spacing: 0.08em; +} + +.status-badge--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.status-badge--warning { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.status-badge--danger { + background: rgba(220, 38, 38, 0.1); + color: #dc2626; +} + +.status-badge--info { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.status-badge--new { + background: var(--color-dark); + color: var(--color-white); +} + +.status-badge--sale { + background: #dc2626; + color: var(--color-white); +} + +.status-badge--hot { + background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); + color: var(--color-white); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .cards-grid { + grid-template-columns: repeat(2, 1fr); + } + + .product-detail { + grid-template-columns: 1fr; + } + + .specs-card { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .cards-grid { + grid-template-columns: 1fr; + } + + .product-horizontal { + flex-direction: column; + } + + .product-horizontal__image { + width: 100%; + height: 280px; + } + + .product-horizontal__footer { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .quick-view { + flex-direction: column; + } + + .quick-view__image { + width: 100%; + height: 300px; + } + + .product-actions { + flex-wrap: wrap; + } +} diff --git a/skills/documatica-v12-design-system/references/product.html b/skills/documatica-v12-design-system/references/product.html new file mode 100644 index 00000000..f3ade719 --- /dev/null +++ b/skills/documatica-v12-design-system/references/product.html @@ -0,0 +1,383 @@ + + + + + + Product — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● CATALOG +

PRODUCT
PAGE

+

Карточки товаров, галереи, варианты, характеристики и действия.

+
+ + +
+
+ 01 +

PRODUCT CARD BASIC

+
+ +
+
+
+ Product + +
+
+ АКСЕССУАРЫ +

Смарт-часы Series X

+
24 990 ₽
+ +
+
+ +
+
● NEW
+
+ Product + +
+
+ КОСМЕТИКА +

Premium Skincare Set

+
8 490 ₽
+ +
+
+ +
+
-30%
+
+ Product + +
+
+ ОБУВЬ +

Running Pro Max

+
+ 11 990 ₽ + 16 990 ₽ +
+ +
+
+
+
+ + +
+
+ 02 +

PRODUCT DETAIL

+
+ +
+
+
+ Product + + + + + +
+
+ + + +
+
+ +
+ ● IN STOCK +

SMART WATCH
SERIES X

+

SKU: SW-2026-PRO

+ +
+ ★★★★★ + 4.9 (128 отзывов) +
+ +
+ 24 990 ₽ + 29 990 ₽ + -17% +
+ +

Премиальные смарт-часы с AMOLED дисплеем, мониторингом здоровья и автономностью до 14 дней.

+ +
+
+ +
+ + + +
+
+ +
+ +
+ + + +
+
+
+ +
+
+ + + +
+ + +
+ +
+
+ + + + + Бесплатная доставка от 5000 ₽ +
+
+ + + + + Возврат в течение 14 дней +
+
+ + + + Гарантия 2 года +
+
+
+
+
+ + +
+
+ 03 +

SPECIFICATIONS

+
+ +
+
+

ОСНОВНЫЕ

+ + + + + + + + + + + + + + + + + +
ДисплейAMOLED, 1.9", 484×396 px
ПроцессорApple S9 SiP
Память64 ГБ
БатареяДо 14 дней
+
+
+

ДАТЧИКИ

+ + + + + + + + + + + + + + + + + +
ПульсометрОптический + ЭКГ
SpO2Да
GPSGPS + GLONASS
Водозащита5 ATM
+
+
+
+ + +
+
+ 04 +

HORIZONTAL LAYOUT

+
+ +
+
+ Product +
+
+ ● AUDIO +

HEADPHONES PRO MAX

+

Беспроводные наушники с активным шумоподавлением и пространственным звуком.

+
+ 34 990 ₽ +
+ + +
+
+
+
+
+ + +
+
+ 05 +

QUICK VIEW

+
+ +
+
+ Product +
+
+ + ● BESTSELLER +

WIRELESS
EARBUDS

+
12 990 ₽
+
+ ЦВЕТ: +
+ + +
+
+ + Перейти к товару → +
+
+
+ + +
+
+ 06 +

STATUS BADGES

+
+ +
+ ● В НАЛИЧИИ + ● МАЛО + ● НЕТ В НАЛИЧИИ + ● ПРЕДЗАКАЗ + ● NEW + -30% + 🔥 ХИТ +
+
+ + +
+
+ 07 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<div class="product-card">
+  <div class="product-card__badge">● NEW</div>
+  <div class="product-card__image">...</div>
+  <div class="product-card__body">
+    <span class="product-card__category">КАТЕГОРИЯ</span>
+    <h3 class="product-card__title">Название</h3>
+    <div class="product-card__price">24 990 ₽</div>
+  </div>
+</div>
+
+/* Статусы */
+.status-badge--success   /* Зелёный */
+.status-badge--warning   /* Жёлтый */
+.status-badge--danger    /* Красный */
+.status-badge--info      /* Синий */
+.status-badge--new       /* Синий NEW */
+.status-badge--sale      /* Красный скидка */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/profile.css b/skills/documatica-v12-design-system/references/profile.css new file mode 100644 index 00000000..139bdbc5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/profile.css @@ -0,0 +1,860 @@ +/** + * UI Kit v12.0 — Profile Components + * User profiles, avatars, settings + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 64px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-200); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + DEMO HELPERS + ========================================================================= */ + +.demo-row { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 24px; +} + +.demo-stack { + display: flex; + flex-direction: column; + gap: 24px; +} + +.demo-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.demo-label { + font-size: 12px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0; +} + +.cards-row { + display: flex; + flex-direction: column; + gap: 16px; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 24px; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + color: var(--color-dark); + font-family: inherit; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--sm { + padding: 8px 16px; + font-size: 13px; + border-radius: 8px; +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + PROFILE HEADER + ========================================================================= */ + +.profile-header { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.profile-header__cover { + height: 160px; + background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%); +} + +.profile-header__content { + display: flex; + align-items: flex-start; + gap: 24px; + padding: 0 32px 32px; + margin-top: -48px; +} + +.profile-header__avatar { + width: 120px; + height: 120px; + border-radius: 50%; + border: 4px solid var(--color-white); + object-fit: cover; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + flex-shrink: 0; +} + +.profile-header__info { + flex: 1; + padding-top: 56px; +} + +.profile-header__name { + font-size: 28px; + font-weight: 800; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.profile-header__role { + font-size: 16px; + color: var(--color-primary); + font-weight: 500; + margin: 0 0 12px 0; +} + +.profile-header__bio { + font-size: 15px; + color: var(--color-slate-500); + margin: 0; + max-width: 400px; +} + +.profile-header__actions { + display: flex; + gap: 12px; + padding-top: 56px; +} + +/* ========================================================================= + PROFILE COMPACT + ========================================================================= */ + +.profile-compact { + display: flex; + align-items: center; + gap: 16px; + padding: 16px 20px; + background: var(--color-white); + border-radius: 16px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.profile-compact__avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} + +.profile-compact__info { + flex: 1; +} + +.profile-compact__name { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 2px 0; +} + +.profile-compact__role { + font-size: 14px; + color: var(--color-slate-400); + margin: 0; +} + +/* ========================================================================= + AVATARS + ========================================================================= */ + +.avatar { + border-radius: 50%; + object-fit: cover; +} + +.avatar--xs { + width: 24px; + height: 24px; +} + +.avatar--sm { + width: 32px; + height: 32px; +} + +.avatar--md { + width: 48px; + height: 48px; +} + +.avatar--lg { + width: 64px; + height: 64px; +} + +.avatar--xl { + width: 96px; + height: 96px; +} + +/* ========================================================================= + AVATAR WITH STATUS + ========================================================================= */ + +.avatar-wrap { + position: relative; + display: inline-block; +} + +.avatar-status { + position: absolute; + bottom: 2px; + right: 2px; + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid var(--color-white); +} + +.avatar-status--online { + background: var(--color-success); +} + +.avatar-status--away { + background: var(--color-smart); +} + +.avatar-status--busy { + background: var(--color-danger); +} + +.avatar-status--offline { + background: var(--color-slate-300); +} + +/* ========================================================================= + AVATAR INITIALS + ========================================================================= */ + +.avatar-initials { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 16px; + font-weight: 700; +} + +.avatar-initials--blue { + background: rgba(59, 130, 246, 0.15); + color: var(--color-primary); +} + +.avatar-initials--green { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.avatar-initials--gold { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.avatar-initials--purple { + background: rgba(139, 92, 246, 0.15); + color: #7c3aed; +} + +.avatar-initials--red { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +/* ========================================================================= + AVATAR GROUP + ========================================================================= */ + +.avatar-group { + display: flex; +} + +.avatar-group .avatar { + margin-left: -12px; + border: 2px solid var(--color-white); +} + +.avatar-group .avatar:first-child { + margin-left: 0; +} + +.avatar-group__more { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + margin-left: -12px; + background: var(--color-slate-100); + border-radius: 50%; + border: 2px solid var(--color-white); + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +.avatar-group--sm .avatar { + margin-left: -8px; +} + +.avatar-group__more--sm { + width: 32px; + height: 32px; + margin-left: -8px; + font-size: 11px; +} + +/* ========================================================================= + USER CARD DETAILED + ========================================================================= */ + +.user-card { + max-width: 320px; + background: var(--color-white); + border-radius: 24px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + text-align: center; +} + +.user-card__header { + position: relative; + padding: 32px 32px 0; +} + +.user-card__avatar { + width: 96px; + height: 96px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--color-white); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.user-card__badge { + position: absolute; + top: 32px; + right: 32px; + padding: 4px 10px; + background: linear-gradient(135deg, var(--color-smart) 0%, #f59e0b 100%); + border-radius: 6px; + font-size: 11px; + font-weight: 700; + color: var(--color-dark); +} + +.user-card__body { + padding: 20px 32px; +} + +.user-card__name { + font-size: 20px; + font-weight: 800; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.user-card__role { + font-size: 14px; + color: var(--color-primary); + font-weight: 500; + margin: 0 0 12px 0; +} + +.user-card__bio { + font-size: 14px; + color: var(--color-slate-500); + line-height: 1.5; + margin: 0 0 20px 0; +} + +.user-card__stats { + display: flex; + justify-content: center; + gap: 24px; + padding-top: 16px; + border-top: 1px solid var(--color-slate-100); +} + +.user-card__stat { + display: flex; + flex-direction: column; + gap: 2px; +} + +.user-card__stat-value { + font-size: 18px; + font-weight: 800; + color: var(--color-dark); +} + +.user-card__stat-label { + font-size: 12px; + color: var(--color-slate-400); +} + +.user-card__footer { + padding: 0 32px 32px; +} + +/* ========================================================================= + TEAM GRID + ========================================================================= */ + +.team-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.team-member { + background: var(--color-white); + border-radius: 20px; + padding: 32px; + text-align: center; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.team-member:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); +} + +.team-member__avatar { + width: 96px; + height: 96px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 16px; +} + +.team-member__name { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.team-member__role { + font-size: 14px; + color: var(--color-slate-400); + margin: 0 0 16px 0; +} + +.team-member__social { + display: flex; + justify-content: center; + gap: 12px; +} + +.team-member__link { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border-radius: 10px; + color: var(--color-slate-400); + transition: all 0.2s ease; +} + +.team-member__link:hover { + background: var(--color-primary); + color: var(--color-white); +} + +/* ========================================================================= + SETTINGS CARD + ========================================================================= */ + +.settings-card { + background: var(--color-white); + border-radius: 24px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.settings-card__header { + padding: 24px 32px; + border-bottom: 1px solid var(--color-slate-100); +} + +.settings-card__header h3 { + margin: 0; + font-size: 20px; + font-weight: 700; + color: var(--color-dark); +} + +.settings-card__body { + padding: 32px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.settings-card__footer { + display: flex; + justify-content: flex-end; + gap: 12px; + padding: 24px 32px; + background: var(--color-slate-50); + border-top: 1px solid var(--color-slate-100); +} + +.settings-row { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.settings-field__avatar-wrap { + position: relative; + width: fit-content; +} + +.settings-field__avatar { + width: 96px; + height: 96px; + border-radius: 50%; + object-fit: cover; +} + +.settings-field__avatar-btn { + position: absolute; + bottom: 0; + right: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border: 2px solid var(--color-white); + border-radius: 50%; + color: var(--color-white); + cursor: pointer; +} + +.settings-label { + display: block; + font-size: 14px; + font-weight: 600; + color: var(--color-dark); + margin-bottom: 8px; +} + +.settings-input, +.settings-textarea { + width: 100%; + padding: 12px 16px; + background: var(--color-slate-50); + border: 2px solid var(--color-slate-200); + border-radius: 12px; + font-family: inherit; + font-size: 15px; + color: var(--color-dark); + transition: all 0.2s ease; +} + +.settings-input:focus, +.settings-textarea:focus { + outline: none; + border-color: var(--color-primary); + background: var(--color-white); +} + +.settings-textarea { + resize: vertical; + min-height: 100px; +} + +/* ========================================================================= + ACTIVITY LIST + ========================================================================= */ + +.activity-list { + background: var(--color-white); + border-radius: 20px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.activity-item { + display: flex; + align-items: center; + gap: 16px; + padding: 20px; + border-bottom: 1px solid var(--color-slate-100); +} + +.activity-item:last-child { + border-bottom: none; +} + +.activity-item__avatar { + width: 44px; + height: 44px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.activity-item__content { + flex: 1; +} + +.activity-item__text { + font-size: 15px; + color: var(--color-slate-600); + margin: 0 0 4px 0; +} + +.activity-item__text strong { + color: var(--color-dark); + font-weight: 600; +} + +.activity-item__time { + font-size: 13px; + color: var(--color-slate-400); +} + +.activity-item__preview { + width: 56px; + height: 42px; + border-radius: 8px; + overflow: hidden; + flex-shrink: 0; +} + +.activity-item__preview img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .profile-header__content { + flex-direction: column; + align-items: center; + text-align: center; + padding: 0 24px 24px; + } + + .profile-header__info { + padding-top: 0; + } + + .profile-header__actions { + padding-top: 0; + flex-direction: column; + width: 100%; + } + + .profile-header__actions .btn { + width: 100%; + } + + .team-grid { + grid-template-columns: 1fr; + } + + .settings-row { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/profile.html b/skills/documatica-v12-design-system/references/profile.html new file mode 100644 index 00000000..34f393c2 --- /dev/null +++ b/skills/documatica-v12-design-system/references/profile.html @@ -0,0 +1,418 @@ + + + + + + Profile — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ USER +

Profile Components

+

Карточки профилей, аватары, шапки пользователей, настройки аккаунта.

+
+ + +
+
+ 01 +

Profile Header

+
+ +
+
+
+ Avatar +
+

Александр Петров

+

Lead Product Designer

+

Создаю дизайн-системы и интерфейсы для технологических стартапов. 10+ лет опыта.

+
+
+ + +
+
+
+
+ + +
+
+ 02 +

Profile Card Compact

+
+ +
+
+ Avatar +
+

Мария Иванова

+

Frontend Developer

+
+ +
+ +
+ Avatar +
+

Дмитрий Козлов

+

Product Manager

+
+ +
+
+
+ + +
+
+ 03 +

Avatar Sizes

+
+ +
+
+

XS (24px)

+ Avatar +
+
+

SM (32px)

+ Avatar +
+
+

MD (48px)

+ Avatar +
+
+

LG (64px)

+ Avatar +
+
+

XL (96px)

+ Avatar +
+
+
+ + +
+
+ 04 +

Avatar with Status

+
+ +
+
+ Avatar + +
+
+ Avatar + +
+
+ Avatar + +
+
+ Avatar + +
+
+
+ + +
+
+ 05 +

Avatar Initials

+
+ +
+
АП
+
МИ
+
ДК
+
ОС
+
ВН
+
+
+ + +
+
+ 06 +

Avatar Group

+
+ +
+
+ Avatar + Avatar + Avatar + Avatar + +12 +
+ +
+ Avatar + Avatar + Avatar + +5 +
+
+
+ + +
+
+ 07 +

User Card Detailed

+
+ +
+
+ Avatar +
PRO
+
+
+

Елена Смирнова

+

UX Researcher

+

Помогаю компаниям понять своих пользователей через исследования и тестирование.

+
+
+ 1.2K + Подписчиков +
+
+ 86 + Проектов +
+
+ 4.9 + Рейтинг +
+
+
+
+ +
+
+
+ + +
+
+ 08 +

Team Grid

+
+ +
+
+ Avatar +

Игорь Волков

+

CEO & Founder

+ +
+
+ Avatar +

Анна Белова

+

Head of Design

+ +
+
+ Avatar +

Павел Новиков

+

Tech Lead

+ +
+
+
+ + +
+
+ 09 +

Account Settings

+
+ +
+
+

Личные данные

+
+
+
+
+ Avatar + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+
+
+ + +
+
+
+ + +
+
+ 10 +

Activity List

+
+ +
+
+ Avatar +
+

Александр прокомментировал ваш дизайн

+ 2 минуты назад +
+
+ Preview +
+
+
+ Avatar +
+

Мария подписалась на вас

+ 1 час назад +
+ +
+
+ Avatar +
+

Дмитрий добавил вас в проект «UI Kit»

+ Вчера в 18:30 +
+
+
+
+ + +
+
+ 11 +

Использование

+
+ +
+ 
/* Аватары */
+<img class="avatar avatar--xs">   /* 24px */
+<img class="avatar avatar--sm">   /* 32px */
+<img class="avatar avatar--md">   /* 48px */
+<img class="avatar avatar--lg">   /* 64px */
+<img class="avatar avatar--xl">   /* 96px */
+
+/* Со статусом */
+<div class="avatar-wrap">
+  <img class="avatar avatar--md">
+  <span class="avatar-status avatar-status--online"></span>
+</div>
+
+/* Инициалы */
+<div class="avatar-initials avatar-initials--blue">АП</div>
+
+/* Группа */
+<div class="avatar-group">
+  <img class="avatar avatar--md">...
+  <span class="avatar-group__more">+5</span>
+</div>
+
+/* Профиль */
+<div class="profile-header">...</div>
+<div class="profile-compact">...</div>
+<div class="user-card">...</div>
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/progress.css b/skills/documatica-v12-design-system/references/progress.css new file mode 100644 index 00000000..da07abc0 --- /dev/null +++ b/skills/documatica-v12-design-system/references/progress.css @@ -0,0 +1,591 @@ +/** + * Documatica Design System v12.0 + * Progress & Loading Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + PROGRESS BAR + ========================================================================= */ + +.progress-stack { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +.progress-group { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.progress-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.progress-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); +} + +.progress-value { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.progress { + height: 8px; + background: var(--color-slate-200); + border-radius: var(--radius-full); + overflow: hidden; +} + +.progress--sm { + height: 4px; +} + +.progress--lg { + height: 12px; +} + +.progress--labeled { + height: 24px; +} + +.progress__bar { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.progress__bar--success { + background: var(--color-success); +} + +.progress__bar--warning { + background: var(--color-smart); +} + +.progress__bar--danger { + background: var(--color-danger); +} + +.progress__label { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 0 var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-white); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +/* ========================================================================= + ANIMATED PROGRESS + ========================================================================= */ + +.progress__bar--indeterminate { + width: 30%; + animation: indeterminate 1.5s ease-in-out infinite; +} + +@-webkit-keyframes indeterminate { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(400%); } +} + +@keyframes indeterminate { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(400%); } +} + +.progress__bar--striped { + background-image: linear-gradient( + 45deg, + rgba(255, 255, 255, 0.2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0.2) 75%, + transparent 75%, + transparent + ); + background-size: 20px 20px; + animation: stripes 1s linear infinite; +} + +@-webkit-keyframes stripes { + from { background-position: 20px 0; } + to { background-position: 0 0; } +} + +@keyframes stripes { + from { background-position: 20px 0; } + to { background-position: 0 0; } +} + +/* ========================================================================= + SPINNER + ========================================================================= */ + +.spinners-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-8); +} + +.spinners-row--align-end { + align-items: flex-end; +} + +.spinner-box { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + min-width: 100px; +} + +.spinner-box--dark { + background: var(--color-dark); + border-color: var(--color-dark); +} + +.spinner-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); +} + +.spinner-label--light { + color: var(--color-slate-400); +} + +.spinner { + width: 32px; + height: 32px; + border: 3px solid var(--color-slate-200); + border-top-color: var(--color-slate-500); + border-radius: var(--radius-full); + animation: spin 0.8s linear infinite; +} + +.spinner--primary { + border-color: rgba(59, 130, 246, 0.2); + border-top-color: var(--color-primary); +} + +.spinner--smart { + border-color: rgba(251, 191, 36, 0.2); + border-top-color: var(--color-smart); +} + +.spinner--white { + border-color: rgba(255, 255, 255, 0.2); + border-top-color: var(--color-white); +} + +.spinner--xs { + width: 16px; + height: 16px; + border-width: 2px; +} + +.spinner--sm { + width: 24px; + height: 24px; + border-width: 2px; +} + +.spinner--lg { + width: 48px; + height: 48px; + border-width: 4px; +} + +.spinner--xl { + width: 64px; + height: 64px; + border-width: 5px; +} + +@-webkit-keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* ========================================================================= + DOTS LOADER + ========================================================================= */ + +.dots-loader { + display: flex; + gap: var(--spacing-2); +} + +.dots-loader span { + width: 10px; + height: 10px; + background: var(--color-slate-400); + border-radius: var(--radius-full); + animation: dotsBounce 1.4s ease-in-out infinite both; +} + +.dots-loader span:nth-child(1) { + animation-delay: -0.32s; +} + +.dots-loader span:nth-child(2) { + animation-delay: -0.16s; +} + +.dots-loader--primary span { + background: var(--color-primary); +} + +.dots-loader--smart span { + background: var(--color-smart); +} + +@-webkit-keyframes dotsBounce { + 0%, 80%, 100% { + transform: scale(0.6); + opacity: 0.5; + } + 40% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes dotsBounce { + 0%, 80%, 100% { + transform: scale(0.6); + opacity: 0.5; + } + 40% { + transform: scale(1); + opacity: 1; + } +} + +/* ========================================================================= + SKELETON + ========================================================================= */ + +.skeletons-demo { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +.skeleton { + background: linear-gradient( + 90deg, + var(--color-slate-200) 25%, + var(--color-slate-100) 50%, + var(--color-slate-200) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.5s ease-in-out infinite; + border-radius: var(--radius-md); +} + +@-webkit-keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.skeleton--circle { + width: 48px; + height: 48px; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.skeleton--avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.skeleton--title { + height: 20px; + width: 60%; + margin-bottom: var(--spacing-2); +} + +.skeleton--text { + height: 14px; + width: 100%; + margin-bottom: var(--spacing-2); +} + +.skeleton--line { + height: 12px; + width: 100%; + margin-bottom: var(--spacing-2); +} + +.skeleton--short { + width: 40%; +} + +.skeleton--wide { + flex: 2; +} + +.skeleton--button { + width: 80px; + height: 32px; + border-radius: var(--radius-lg); + flex-shrink: 0; +} + +.skeleton--cell { + height: 16px; + flex: 1; + border-radius: var(--radius-sm); +} + +/* Skeleton Card */ +.skeleton-card { + display: flex; + gap: var(--spacing-4); + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.skeleton-card__content { + flex: 1; +} + +/* Skeleton Row */ +.skeleton-row { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.skeleton-row__content { + flex: 1; +} + +/* Skeleton Table */ +.skeleton-table { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.skeleton-table__row { + display: flex; + gap: var(--spacing-4); + padding: var(--spacing-4) var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.skeleton-table__row:last-child { + border-bottom: none; +} + +/* ========================================================================= + CIRCULAR PROGRESS + ========================================================================= */ + +.circular-progress { + position: relative; + width: 80px; + height: 80px; +} + +.circular-progress svg { + transform: rotate(-90deg); + width: 100%; + height: 100%; +} + +.circular-progress__bg { + fill: none; + stroke: var(--color-slate-200); + stroke-width: 8; +} + +.circular-progress__bar { + fill: none; + stroke: var(--color-primary); + stroke-width: 8; + stroke-linecap: round; + stroke-dasharray: 283; + stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100); + transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.circular-progress--success .circular-progress__bar { + stroke: var(--color-success); +} + +.circular-progress--warning .circular-progress__bar { + stroke: var(--color-smart); +} + +.circular-progress__value { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .spinners-row { + gap: var(--spacing-4); + } + + .spinner-box { + min-width: 80px; + padding: var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/progress.html b/skills/documatica-v12-design-system/references/progress.html new file mode 100644 index 00000000..a8c34062 --- /dev/null +++ b/skills/documatica-v12-design-system/references/progress.html @@ -0,0 +1,351 @@ + + + + + + Progress — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Loading Protocol v12.0 +
+

+ Прогресс +

+
+ + +
+

01. Progress Bars

+
+ + +
+
+ Загрузка файла + 45% +
+
+
+
+
+ + +
+
+ AI Анализ + 100% +
+
+
+
+
+ + +
+
+ Квота API + 85% +
+
+
+
+
+ + +
+
+ Хранилище + 95% +
+
+
+
+
+ +
+
+ + +
+

02. Sizes

+
+ +
+ Small (4px) +
+
+
+
+ +
+ Default (8px) +
+
+
+
+ +
+ Large (12px) +
+
+
+
+ +
+
+ + +
+

03. Animated

+
+ +
+ Indeterminate (бесконечный) +
+
+
+
+ +
+ Striped Animated +
+
+
+
+ +
+
+ + +
+

04. With Label Inside

+
+ +
+
+ 68% +
+
+ +
+
+ Завершено +
+
+ +
+
+ + +
+

05. Spinners

+
+ + + + + + + + + + + + + +
+
+ + +
+

06. Spinner Sizes

+
+ + + + + + + + + + + +
+
+ + +
+

07. Dots Loader

+
+ + + + + + + +
+
+ + +
+

08. Skeleton Loaders

+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+

09. Circular Progress

+
+ + + + + + + +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/rating.css b/skills/documatica-v12-design-system/references/rating.css new file mode 100644 index 00000000..a3f8a5d5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/rating.css @@ -0,0 +1,482 @@ +/** + * Documatica Design System v12.0 + * Rating Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + RATING BASE + ========================================================================= */ + +.rating { + display: inline-flex; + gap: var(--spacing-1); +} + +.star { + font-size: 24px; + color: var(--color-slate-300); + transition: var(--transition-spring); + cursor: default; +} + +.star--filled { + color: var(--color-smart); +} + +.star--half { + background: linear-gradient(90deg, var(--color-smart) 50%, var(--color-slate-300) 50%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.star--mini { + font-size: 14px; +} + +/* Sizes */ +.rating--sm .star { + font-size: 18px; +} + +.rating--lg .star { + font-size: 32px; +} + +.rating--xl .star { + font-size: 48px; +} + +/* Colors */ +.rating--primary .star--filled { + color: var(--color-primary); +} + +.rating--primary .star--half { + background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-slate-300) 50%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.rating--success .star--filled { + color: var(--color-success); +} + +.rating--success .star--half { + background: linear-gradient(90deg, var(--color-success) 50%, var(--color-slate-300) 50%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.rating--danger .star--filled { + color: var(--color-danger); +} + +/* Icon Variants */ +.rating--hearts .icon, +.rating--thumbs .icon, +.rating--fire .icon { + font-size: 24px; + filter: grayscale(1); + opacity: 0.4; + transition: var(--transition-base); +} + +.rating--hearts .icon--filled, +.rating--thumbs .icon--filled, +.rating--fire .icon--filled { + filter: grayscale(0); + opacity: 1; +} + +/* Interactive */ +.rating--interactive { + cursor: pointer; +} + +.rating--interactive .star { + cursor: pointer; +} + +.rating--interactive .star:hover, +.rating--interactive .star:hover ~ .star { + color: var(--color-slate-300); +} + +.rating--interactive:hover .star { + color: var(--color-smart); +} + +.rating--interactive .star:hover ~ .star { + color: var(--color-slate-300); +} + +/* ========================================================================= + RATING LAYOUTS + ========================================================================= */ + +.ratings-row { + display: flex; + gap: var(--spacing-8); + flex-wrap: wrap; +} + +.ratings-col { + display: flex; + flex-direction: column; + gap: var(--spacing-5); +} + +.rating-row { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.rating-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + min-width: 100px; +} + +.rating-with-value { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.rating-value { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.hint-text { + margin-top: var(--spacing-3); + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + RATING CARD + ========================================================================= */ + +.rating-card { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); +} + +.rating-card__info { + display: flex; + flex-direction: column; +} + +.rating-card__score { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.rating-card__count { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.rating-inline { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.rating-inline__text { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +/* ========================================================================= + RATING BREAKDOWN + ========================================================================= */ + +.rating-breakdown { + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.breakdown-header { + display: flex; + align-items: center; + gap: var(--spacing-4); + margin-bottom: var(--spacing-6); + padding-bottom: var(--spacing-6); + border-bottom: 1px solid var(--color-slate-100); +} + +.breakdown-score { + font-size: 48px; + font-weight: var(--font-weight-black); + color: var(--color-dark); + line-height: 1; +} + +.breakdown-summary { + display: flex; + flex-direction: column; + gap: var(--spacing-1); +} + +.breakdown-count { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.breakdown-bars { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.breakdown-row { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.breakdown-label { + width: 16px; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-600); + text-align: center; +} + +.breakdown-bar { + flex: 1; + height: 8px; + background: var(--color-slate-100); + border-radius: var(--radius-full); + overflow: hidden; +} + +.breakdown-fill { + height: 100%; + background: var(--color-smart); + border-radius: var(--radius-full); +} + +.breakdown-percent { + width: 40px; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-align: right; +} + +/* ========================================================================= + AI RATING + ========================================================================= */ + +.ai-rating { + padding: var(--spacing-6); + background: var(--color-dark); + border-radius: var(--radius-2xl); + border: 1px solid var(--color-slate-700); +} + +.ai-rating__header { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-5); +} + +.ai-rating__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(251, 191, 36, 0.15); + border-radius: var(--radius-lg); + color: var(--color-smart); +} + +.ai-rating__icon svg { + width: 22px; + height: 22px; +} + +.ai-rating__label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-white); +} + +.ai-rating__display { + display: flex; + align-items: center; + gap: var(--spacing-4); + margin-bottom: var(--spacing-5); +} + +.ai-rating__score { + font-size: 48px; + font-weight: var(--font-weight-black); + color: var(--color-smart); + line-height: 1; +} + +.ai-rating__bar { + flex: 1; + height: 12px; + background: var(--color-slate-700); + border-radius: var(--radius-full); + overflow: hidden; +} + +.ai-rating__fill { + height: 100%; + background: linear-gradient(90deg, var(--color-smart), #f59e0b); + border-radius: var(--radius-full); +} + +.ai-rating__tags { + display: flex; + gap: var(--spacing-2); + flex-wrap: wrap; +} + +.ai-tag { + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + background: var(--color-slate-800); + border-radius: var(--radius-full); +} + +.ai-tag--highlight { + color: var(--color-success); + background: rgba(16, 185, 129, 0.15); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .ratings-row { + flex-direction: column; + gap: var(--spacing-4); + } + + .rating-label { + min-width: 80px; + } +} diff --git a/skills/documatica-v12-design-system/references/rating.html b/skills/documatica-v12-design-system/references/rating.html new file mode 100644 index 00000000..04e8f7f5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/rating.html @@ -0,0 +1,356 @@ + + + + + + Rating — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Rating Protocol v12.0 +
+

+ Rating +

+
+ + +
+

01. Star Rating

+
+
+ ★ + ★ + ★ + ★ + ★ +
+
+ ★ + ★ + ★ + ★ + ★ +
+
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ + +
+

02. Sizes

+
+
+ Small +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ Base +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ Large +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ XL +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+
+ + +
+

03. Color Variants

+
+
+ Gold (Default) +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ Primary +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ Success +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+ Danger +
+ ★ + ★ + ★ + ★ + ★ +
+
+
+
+ + +
+

04. Half Stars

+
+
+
+ ★ + ★ + ★ + ★ + ★ +
+ 2.5 +
+
+
+ ★ + ★ + ★ + ★ + ★ +
+ 4.5 +
+
+
+ + +
+

05. With Text

+
+
+
+ ★ + ★ + ★ + ★ + ★ +
+
+ 5.0 + из 1,247 отзывов +
+
+
+
+ ★ + ★ + ★ + ★ + ★ +
+ 4.0 (324 отзыва) +
+
+
+ + +
+

06. Icon Variants

+
+
+ Hearts +
+ ❤ + ❤ + ❤ + ❤ + ❤ +
+
+
+ Thumbs +
+ 👍 + 👍 + 👍 + 👍 + 👍 +
+
+
+ Fire +
+ 🔥 + 🔥 + 🔥 + 🔥 + 🔥 +
+
+
+
+ + +
+

07. Interactive (Hover)

+
+ ★ + ★ + ★ + ★ + ★ +
+

Наведите для интерактивного выбора

+
+ + +
+

08. Rating Breakdown

+
+
+
4.7
+
+
+ ★ + ★ + ★ + ★ + ★ +
+ 2,456 отзывов +
+
+
+
+ 5 + ★ +
+
+
+ 72% +
+
+ 4 + ★ +
+
+
+ 18% +
+
+ 3 + ★ +
+
+
+ 6% +
+
+ 2 + ★ +
+
+
+ 2% +
+
+ 1 + ★ +
+
+
+ 2% +
+
+
+
+ + +
+

09. AI Smart Rating

+
+
+ + + + + + AI Confidence Score +
+
+
94%
+
+
+
+
+
+ Высокая точность + Проверено + +12% vs avg +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/reviews.css b/skills/documatica-v12-design-system/references/reviews.css new file mode 100644 index 00000000..5cad2604 --- /dev/null +++ b/skills/documatica-v12-design-system/references/reviews.css @@ -0,0 +1,949 @@ +/** + * UI Kit v12.0 — Reviews + * Ratings, reviews, feedback + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--lg { + padding: 18px 36px; + font-size: 15px; +} + +/* ========================================================================= + RATING SUMMARY + ========================================================================= */ + +.rating-summary { + display: grid; + grid-template-columns: 240px 1fr auto; + gap: 48px; + align-items: center; + background: var(--color-white); + border-radius: 28px; + padding: 40px; +} + +.rating-summary__score { + text-align: center; +} + +.rating-summary__number { + display: block; + font-size: 72px; + font-weight: 900; + color: var(--color-dark); + line-height: 1; +} + +.rating-summary__stars { + font-size: 28px; + color: var(--color-smart); + margin: 12px 0; + letter-spacing: 4px; +} + +.rating-summary__count { + font-size: 14px; + color: var(--color-slate-500); +} + +.rating-summary__bars { + display: flex; + flex-direction: column; + gap: 12px; +} + +.rating-bar { + display: flex; + align-items: center; + gap: 16px; +} + +.rating-bar__label { + width: 40px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +.rating-bar__track { + flex: 1; + height: 10px; + background: var(--color-slate-100); + border-radius: 5px; + overflow: hidden; +} + +.rating-bar__fill { + height: 100%; + background: var(--color-smart); + border-radius: 5px; + transition: width 0.3s ease; +} + +.rating-bar__count { + width: 40px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-align: right; +} + +/* ========================================================================= + REVIEW CARDS + ========================================================================= */ + +.reviews-list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.review-card { + background: var(--color-white); + border-radius: 24px; + padding: 28px; +} + +.review-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 20px; +} + +.review-card__author { + display: flex; + align-items: center; + gap: 14px; +} + +.review-card__avatar { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: 14px; + font-size: 16px; + font-weight: 700; + color: var(--color-white); +} + +.review-card__avatar--img { + padding: 0; + overflow: hidden; +} + +.review-card__avatar--img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.review-card__info { + display: flex; + flex-direction: column; + gap: 4px; +} + +.review-card__name { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +.review-card__badge { + font-size: 11px; + font-weight: 700; + color: var(--color-success); + letter-spacing: 0.08em; +} + +.review-card__meta { + text-align: right; +} + +.review-card__stars { + font-size: 18px; + color: var(--color-smart); + letter-spacing: 2px; + margin-bottom: 4px; +} + +.review-card__date { + font-size: 13px; + color: var(--color-slate-400); +} + +.review-card__title { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 12px 0; +} + +.review-card__text { + font-size: 15px; + color: var(--color-slate-600); + line-height: 1.7; + margin: 0; +} + +.review-card__images { + display: flex; + gap: 12px; + margin-top: 20px; +} + +.review-card__images img { + width: 80px; + height: 80px; + border-radius: 14px; + object-fit: cover; + cursor: pointer; + transition: transform 0.2s ease; +} + +.review-card__images img:hover { + transform: scale(1.05); +} + +.review-card__footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 24px; + padding-top: 20px; + border-top: 1px solid var(--color-slate-100); +} + +.review-card__helpful { + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; + color: var(--color-slate-500); +} + +.helpful-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + background: var(--color-slate-100); + border: none; + border-radius: 10px; + font-family: inherit; + font-size: 13px; + font-weight: 600; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.helpful-btn:hover { + background: var(--color-slate-200); +} + +.helpful-btn--active { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.review-card__reply { + padding: 10px 20px; + background: transparent; + border: none; + font-family: inherit; + font-size: 14px; + font-weight: 600; + color: var(--color-primary); + cursor: pointer; + transition: color 0.2s ease; +} + +.review-card__reply:hover { + color: #2563eb; +} + +/* Seller Response */ +.review-response { + margin-top: 20px; + padding: 20px; + background: var(--color-slate-50); + border-radius: 16px; + border-left: 4px solid var(--color-primary); +} + +.review-response__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + +.review-response__badge { + font-size: 11px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.review-response__date { + font-size: 12px; + color: var(--color-slate-400); +} + +.review-response__text { + font-size: 14px; + color: var(--color-slate-600); + line-height: 1.6; + margin: 0; +} + +/* ========================================================================= + STAR RATINGS + ========================================================================= */ + +.stars-demo { + background: var(--color-white); + border-radius: 24px; + padding: 32px; +} + +.stars-row { + display: flex; + align-items: center; + gap: 20px; + padding: 16px 0; + border-bottom: 1px solid var(--color-slate-100); +} + +.stars-row:last-child { + border-bottom: none; +} + +.stars-label { + width: 100px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +.stars-display { + font-size: 24px; + letter-spacing: 4px; + color: var(--color-slate-300); +} + +.stars-display--5 { + color: var(--color-smart); +} + +.stars-display--4 { + background: linear-gradient(90deg, var(--color-smart) 80%, var(--color-slate-300) 80%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stars-display--3 { + background: linear-gradient(90deg, var(--color-smart) 60%, var(--color-slate-300) 60%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stars-display--2 { + background: linear-gradient(90deg, var(--color-smart) 40%, var(--color-slate-300) 40%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stars-display--1 { + background: linear-gradient(90deg, var(--color-smart) 20%, var(--color-slate-300) 20%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ========================================================================= + INTERACTIVE RATING + ========================================================================= */ + +.rating-input-card { + text-align: center; + padding: 48px; + background: var(--color-white); + border-radius: 24px; +} + +.rating-input-card__title { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 24px 0; +} + +.rating-input { + display: inline-flex; + gap: 8px; + margin-bottom: 16px; +} + +.star-btn { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + font-size: 24px; + color: var(--color-slate-300); + cursor: pointer; + transition: all 0.2s ease; +} + +.star-btn:hover { + transform: scale(1.1); + color: var(--color-smart); +} + +.star-btn--active { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.star-btn--lg { + width: 56px; + height: 56px; + font-size: 28px; +} + +.rating-input__label { + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +/* ========================================================================= + REVIEW FORM + ========================================================================= */ + +.review-form { + background: var(--color-white); + border-radius: 28px; + padding: 36px; +} + +.review-form__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.review-form__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.review-form__title { + font-size: 14px; + font-weight: 700; + color: var(--color-dark); + letter-spacing: 0.1em; + margin: 0; +} + +.form-group { + margin-bottom: 24px; +} + +.form-label { + display: block; + font-size: 11px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin-bottom: 12px; +} + +.form-input { + width: 100%; + padding: 16px 20px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 14px; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); + transition: all 0.2s ease; +} + +.form-input:focus { + outline: none; + background: var(--color-white); + border-color: var(--color-primary); +} + +.form-textarea { + width: 100%; + padding: 16px 20px; + background: var(--color-slate-100); + border: 2px solid transparent; + border-radius: 14px; + font-family: inherit; + font-size: 15px; + font-weight: 500; + color: var(--color-dark); + resize: vertical; + min-height: 120px; + transition: all 0.2s ease; +} + +.form-textarea:focus { + outline: none; + background: var(--color-white); + border-color: var(--color-primary); +} + +.photo-upload { + display: flex; + gap: 12px; +} + +.photo-upload__item { + position: relative; + width: 80px; + height: 80px; + border-radius: 14px; + overflow: hidden; +} + +.photo-upload__item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.photo-upload__remove { + position: absolute; + top: 4px; + right: 4px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.6); + border: none; + border-radius: 50%; + font-size: 16px; + color: var(--color-white); + cursor: pointer; +} + +.photo-upload__add { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: 2px dashed var(--color-slate-300); + border-radius: 14px; + color: var(--color-slate-400); + cursor: pointer; + transition: all 0.2s ease; +} + +.photo-upload__add:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.review-form__footer { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 24px; + border-top: 1px solid var(--color-slate-100); +} + +.checkbox { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; +} + +.checkbox input { + display: none; +} + +.checkbox__mark { + width: 22px; + height: 22px; + background: var(--color-slate-100); + border: 2px solid var(--color-slate-300); + border-radius: 6px; + position: relative; + transition: all 0.2s ease; +} + +.checkbox input:checked + .checkbox__mark { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.checkbox input:checked + .checkbox__mark::after { + content: ''; + position: absolute; + top: 3px; + left: 7px; + width: 5px; + height: 10px; + border: solid var(--color-white); + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.checkbox__text { + font-size: 14px; + color: var(--color-slate-600); +} + +/* ========================================================================= + COMPACT REVIEWS + ========================================================================= */ + +.compact-reviews { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.compact-review { + background: var(--color-white); + border-radius: 20px; + padding: 28px; + text-align: center; +} + +.compact-review__stars { + font-size: 20px; + color: var(--color-smart); + letter-spacing: 2px; + margin-bottom: 16px; +} + +.compact-review__text { + font-size: 15px; + font-style: italic; + color: var(--color-slate-600); + line-height: 1.6; + margin: 0 0 16px 0; +} + +.compact-review__author { + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); +} + +/* ========================================================================= + TESTIMONIAL + ========================================================================= */ + +.testimonial { + position: relative; + background: var(--color-white); + border-radius: 32px; + padding: 48px; + text-align: center; +} + +.testimonial__quote { + font-size: 120px; + font-weight: 900; + color: var(--color-slate-100); + line-height: 1; + position: absolute; + top: 20px; + left: 40px; +} + +.testimonial__text { + font-size: 24px; + font-weight: 500; + color: var(--color-dark); + line-height: 1.6; + max-width: 700px; + margin: 0 auto 32px; + position: relative; + z-index: 1; +} + +.testimonial__author { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; +} + +.testimonial__avatar { + width: 56px; + height: 56px; + border-radius: 50%; + overflow: hidden; +} + +.testimonial__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.testimonial__info { + text-align: left; +} + +.testimonial__name { + display: block; + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +.testimonial__role { + font-size: 14px; + color: var(--color-slate-500); +} + +.testimonial__stars { + font-size: 20px; + color: var(--color-smart); + letter-spacing: 2px; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .rating-summary { + grid-template-columns: 1fr; + text-align: center; + } + + .rating-summary__action { + margin-top: 20px; + } + + .compact-reviews { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .review-card__header { + flex-direction: column; + gap: 16px; + } + + .review-card__meta { + text-align: left; + } + + .review-card__footer { + flex-direction: column; + gap: 16px; + align-items: flex-start; + } + + .review-form__footer { + flex-direction: column; + gap: 20px; + align-items: flex-start; + } + + .testimonial__text { + font-size: 18px; + } +} diff --git a/skills/documatica-v12-design-system/references/reviews.html b/skills/documatica-v12-design-system/references/reviews.html new file mode 100644 index 00000000..5dfe9c8c --- /dev/null +++ b/skills/documatica-v12-design-system/references/reviews.html @@ -0,0 +1,394 @@ + + + + + + Reviews — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● FEEDBACK +

RE
VIEWS

+

Отзывы, рейтинги, оценки и обратная связь пользователей.

+
+ + +
+
+ 01 +

RATING SUMMARY

+
+ +
+
+ 4.8 +
★★★★★
+ На основе 256 отзывов +
+
+
+ 5 ★ +
+
+
+ 200 +
+
+ 4 ★ +
+
+
+ 38 +
+
+ 3 ★ +
+
+
+ 12 +
+
+ 2 ★ +
+
+
+ 4 +
+
+ 1 ★ +
+
+
+ 2 +
+
+
+ +
+
+
+ + +
+
+ 02 +

REVIEW CARDS

+
+ +
+
+
+
+
АП
+
+ Алексей Петров + ● ПРОВЕРЕННАЯ ПОКУПКА +
+
+
+
★★★★★
+ 2 дня назад +
+
+

Отличные часы, рекомендую!

+

Пользуюсь уже месяц, батарея держит реально 14 дней. Экран яркий, видно даже на солнце. Синхронизация со смартфоном работает отлично. Единственный минус — ремешок немного жестковат, но это решается заменой.

+
+ + +
+
+
+ Был ли отзыв полезен? + + +
+ +
+
+ +
+
+
+
+ +
+
+ Мария Сидорова + ● ПРОВЕРЕННАЯ ПОКУПКА +
+
+
+
★★★★☆
+ Неделю назад +
+
+

Хорошие часы, но есть нюансы

+

В целом довольна покупкой. Функционал богатый, дизайн стильный. Снимаю звезду за то, что приложение иногда глючит и требует перезапуска. Надеюсь, исправят в обновлениях.

+
+
+ Был ли отзыв полезен? + + +
+ +
+ + +
+
+ ● ОТВЕТ ПРОДАВЦА + 5 дней назад +
+

Спасибо за отзыв! Мы передали информацию о багах в приложении команде разработки. В ближайшем обновлении всё будет исправлено.

+
+
+
+
+ + +
+
+ 03 +

STAR RATINGS

+
+ +
+
+ 5 звёзд +
★★★★★
+
+
+ 4 звезды +
★★★★☆
+
+
+ 3 звезды +
★★★☆☆
+
+
+ 2 звезды +
★★☆☆☆
+
+
+ 1 звезда +
★☆☆☆☆
+
+
+
+ + +
+
+ 04 +

INTERACTIVE RATING

+
+ +
+

Оцените товар

+
+ + + + + +
+ Хорошо +
+
+ + +
+
+ 05 +

REVIEW FORM

+
+ +
+
+ 01 +

НАПИСАТЬ ОТЗЫВ

+
+ +
+ +
+ + + + + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+ +
+
+ +
+ + +
+
+
+ + +
+
+ 06 +

COMPACT REVIEWS

+
+ +
+
+
★★★★★
+

"Отличный товар, доставка быстрая!"

+ — Иван К. +
+
+
★★★★☆
+

"Качество хорошее, но упаковка могла быть лучше."

+ — Анна М. +
+
+
★★★★★
+

"Превзошёл все ожидания! Буду заказывать ещё."

+ — Дмитрий С. +
+
+
+ + +
+
+ 07 +

TESTIMONIAL

+
+ +
+
"
+

Это лучшие смарт-часы, которые у меня когда-либо были. Отслеживание здоровья невероятно точное, батарея держит две недели, а дизайн просто великолепен.

+
+
+ +
+
+ Сергей Волков + Фитнес-тренер +
+
★★★★★
+
+
+
+ + +
+
+ 08 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Карточка отзыва -->
+<div class="review-card">
+  <div class="review-card__header">
+    <div class="review-card__author">...</div>
+    <div class="review-card__stars">★★★★★</div>
+  </div>
+  <h4 class="review-card__title">Заголовок</h4>
+  <p class="review-card__text">Текст отзыва</p>
+</div>
+
+<!-- Звёздный рейтинг -->
+<div class="stars-display stars-display--5">★★★★★</div>
+<div class="stars-display stars-display--4">★★★★☆</div>
+
+/* Модификаторы */
+.stars-display--5  /* Все звёзды жёлтые */
+.stars-display--4  /* 4 жёлтые, 1 серая */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/selects.css b/skills/documatica-v12-design-system/references/selects.css new file mode 100644 index 00000000..a94e4b06 --- /dev/null +++ b/skills/documatica-v12-design-system/references/selects.css @@ -0,0 +1,551 @@ +/** + * Documatica Design System v12.0 + * Select & Dropdown Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.component-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-6); +} + +.component-grid--2 { + grid-template-columns: repeat(2, 1fr); +} + +.component-box { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--spacing-4); +} + +.component-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-align: center; +} + +.dark-zone { + background: var(--color-dark); + border-radius: var(--radius-2xl); + padding: var(--spacing-8); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + FORM GROUP + ========================================================================= */ + +.form-group { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.form-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-600); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); +} + +.form-label--light { + color: var(--color-slate-300); +} + +.form-helper { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.form-error { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-danger); +} + +.form-success { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-success); +} + +/* ========================================================================= + SELECT BASE + ========================================================================= */ + +.select-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.select { + width: 100%; + padding: var(--spacing-4) var(--spacing-12) var(--spacing-4) var(--spacing-4); + font-family: var(--font-family); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-xl); + appearance: none; + cursor: pointer; + transition: var(--transition-spring); +} + +.select:hover { + border-color: var(--color-slate-300); +} + +.select:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); +} + +.select__chevron { + position: absolute; + right: var(--spacing-4); + width: 20px; + height: 20px; + color: var(--color-slate-400); + pointer-events: none; + transition: var(--transition-base); +} + +.select:focus ~ .select__chevron { + color: var(--color-primary); + transform: rotate(180deg); +} + +/* ========================================================================= + SELECT SIZES + ========================================================================= */ + +.select--sm { + padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-base); + border-radius: var(--radius-lg); +} + +.select__chevron--sm { + width: 16px; + height: 16px; + right: var(--spacing-3); +} + +.select--lg { + padding: var(--spacing-5) var(--spacing-14) var(--spacing-5) var(--spacing-5); + font-size: var(--font-size-xl); + border-radius: var(--radius-2xl); +} + +.select__chevron--lg { + width: 24px; + height: 24px; + right: var(--spacing-5); +} + +/* ========================================================================= + SELECT STATES + ========================================================================= */ + +.select-wrapper--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.select-wrapper--disabled .select { + cursor: not-allowed; + background: var(--color-slate-50); +} + +.select--error { + border-color: var(--color-danger); +} + +.select--error:focus { + border-color: var(--color-danger); + box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); +} + +.select-wrapper--error .select__chevron { + color: var(--color-danger); +} + +.select--success { + border-color: var(--color-success); +} + +.select--success:focus { + border-color: var(--color-success); + box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); +} + +.select-wrapper--success .select__chevron { + color: var(--color-success); +} + +/* ========================================================================= + SELECT WITH ICON + ========================================================================= */ + +.select-wrapper--icon-left .select__icon-left { + position: absolute; + left: var(--spacing-4); + width: 20px; + height: 20px; + color: var(--color-slate-400); + pointer-events: none; + z-index: 1; +} + +.select--icon-left { + padding-left: var(--spacing-12); +} + +/* ========================================================================= + SELECT DARK + ========================================================================= */ + +.select-wrapper--dark { + position: relative; +} + +.select--dark { + background: var(--color-slate-800); + border-color: var(--color-slate-600); + color: var(--color-white); +} + +.select--dark:hover { + border-color: var(--color-slate-500); +} + +.select--dark:focus { + border-color: var(--color-smart); + box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15); +} + +.select-wrapper--dark .select__icon-left { + color: var(--color-slate-400); +} + +.select-wrapper--dark .select__chevron { + color: var(--color-slate-400); +} + +.select--dark:focus ~ .select__chevron { + color: var(--color-smart); +} + +.select__smart-dot { + position: absolute; + top: var(--spacing-3); + right: var(--spacing-12); + width: 8px; + height: 8px; + background: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); +} + +/* ========================================================================= + DROPDOWN + ========================================================================= */ + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown__trigger { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-3) var(--spacing-5); + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: var(--radius-xl); + cursor: pointer; + transition: var(--transition-spring); +} + +.dropdown__trigger:hover { + border-color: var(--color-slate-300); +} + +.dropdown__trigger:focus { + outline: none; + border-color: var(--color-primary); +} + +.dropdown__chevron { + width: 16px; + height: 16px; + color: var(--color-slate-400); + transition: var(--transition-base); +} + +.dropdown:hover .dropdown__chevron, +.dropdown:focus-within .dropdown__chevron { + transform: rotate(180deg); +} + +.dropdown__menu { + position: absolute; + top: calc(100% + var(--spacing-2)); + left: 0; + min-width: 200px; + padding: var(--spacing-2); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: var(--transition-spring); + z-index: var(--z-dropdown); +} + +.dropdown:hover .dropdown__menu, +.dropdown:focus-within .dropdown__menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.dropdown__item { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-4); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + text-decoration: none; + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.dropdown__item svg { + width: 18px; + height: 18px; + color: var(--color-slate-400); +} + +.dropdown__item:hover { + background: var(--color-slate-50); +} + +.dropdown__item:hover svg { + color: var(--color-primary); +} + +.dropdown__item--danger { + color: var(--color-danger); +} + +.dropdown__item--danger svg { + color: var(--color-danger); +} + +.dropdown__item--danger:hover { + background: rgba(220, 38, 38, 0.1); +} + +.dropdown__divider { + height: 1px; + background: var(--color-slate-200); + margin: var(--spacing-2) 0; +} + +/* ========================================================================= + DROPDOWN CHECKBOX + ========================================================================= */ + +.dropdown__check { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-4); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-base); +} + +.dropdown__check:hover { + background: var(--color-slate-50); +} + +.dropdown__check input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.dropdown__check-box { + position: relative; + width: 18px; + height: 18px; + background: var(--color-white); + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-md); + transition: var(--transition-base); +} + +.dropdown__check input:checked ~ .dropdown__check-box { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.dropdown__check-box::after { + content: ''; + position: absolute; + top: 2px; + left: 5px; + width: 5px; + height: 9px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg) scale(0); + transition: var(--transition-base); +} + +.dropdown__check input:checked ~ .dropdown__check-box::after { + transform: rotate(45deg) scale(1); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .component-grid { + grid-template-columns: 1fr; + } + + .component-grid--2 { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/selects.html b/skills/documatica-v12-design-system/references/selects.html new file mode 100644 index 00000000..3c1227d6 --- /dev/null +++ b/skills/documatica-v12-design-system/references/selects.html @@ -0,0 +1,389 @@ + + + + + + Selects — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Selection Protocol v12.0 +
+

+ Селекты +

+
+ + +
+

01. Basic Select

+
+ + +
+
+ + + + +
+ Default +
+ + +
+
+ + + + +
+ With Value +
+ + +
+
+ + + + +
+ Disabled +
+ +
+
+ + +
+

02. With Labels

+
+ + +
+ +
+ + + + +
+
+ + +
+ +
+ + + + +
+ Начните вводить название +
+ +
+
+ + +
+

03. States

+
+ + +
+ +
+ + + + +
+ Обязательное поле +
+ + +
+ +
+ + + + +
+ Валюта подтверждена +
+ +
+
+ + +
+

04. Sizes

+
+ + +
+
+ + + + +
+ Small +
+ + +
+
+ + + + +
+ Medium +
+ + +
+
+ + + + +
+ Large +
+ +
+
+ + +
+

05. With Icon

+
+ + +
+ +
+ + + + + + + +
+
+ + +
+ +
+ + + + + + + +
+
+ +
+
+ + +
+

06. Dark Variant

+
+
+ + +
+ +
+ + + + + + + + +
+
+ + +
+ +
+ + + + +
+
+ +
+
+
+ + +
+

07. Custom Dropdown (CSS Only)

+
+ + +
+ +
+ + + + + Редактировать + + + + + + Дублировать + +
+ + + + + Удалить + +
+
+ + +
+ +
+ + + + +
+
+ +
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/service-page.css b/skills/documatica-v12-design-system/references/service-page.css new file mode 100644 index 00000000..520f22d5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/service-page.css @@ -0,0 +1,889 @@ +/** + * UI Kit v12.0 — Service Page + * Landing page sections for services + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-200); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 24px; + background: var(--color-slate-100); + border: none; + border-radius: 12px; + color: var(--color-dark); + font-family: inherit; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; +} + +.btn--outline { + background: transparent; + border: 2px solid var(--color-slate-200); + color: var(--color-dark); +} + +.btn--outline:hover { + border-color: var(--color-dark); +} + +.btn--white { + background: var(--color-white); + color: var(--color-dark); +} + +.btn--white:hover { + background: var(--color-slate-100); +} + +.btn--ghost { + background: transparent; + color: var(--color-white); +} + +.btn--ghost:hover { + background: rgba(255, 255, 255, 0.1); +} + +.btn--lg { + padding: 16px 32px; + font-size: 16px; +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + SERVICE HERO + ========================================================================= */ + +.service-hero { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; + background: var(--color-white); + border-radius: 24px; + padding: 48px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.service-hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + border-radius: 100px; + margin-bottom: 16px; +} + +.service-hero__title { + font-size: clamp(32px, 4vw, 48px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.1; + margin: 0 0 16px 0; +} + +.service-hero__title span { + color: var(--color-primary); +} + +.service-hero__desc { + font-size: 18px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0 0 24px 0; +} + +.service-hero__actions { + display: flex; + gap: 12px; + margin-bottom: 32px; +} + +.service-hero__stats { + display: flex; + gap: 32px; + padding-top: 24px; + border-top: 1px solid var(--color-slate-100); +} + +.stat { + display: flex; + flex-direction: column; + gap: 4px; +} + +.stat__value { + font-size: 28px; + font-weight: 900; + color: var(--color-dark); +} + +.stat__label { + font-size: 14px; + color: var(--color-slate-400); +} + +.service-hero__visual img { + width: 100%; + height: auto; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +/* ========================================================================= + FEATURES + ========================================================================= */ + +.features { + background: var(--color-white); + border-radius: 24px; + padding: 48px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.features__header { + text-align: center; + margin-bottom: 48px; +} + +.features__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 12px 0; +} + +.features__title span { + color: var(--color-primary); +} + +.features__desc { + font-size: 18px; + color: var(--color-slate-500); + margin: 0; +} + +.features__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.feature-card { + padding: 32px; + background: var(--color-slate-50); + border-radius: 20px; + transition: all 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); +} + +.feature-card__icon { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(59, 130, 246, 0.1); + border-radius: 16px; + color: var(--color-primary); + margin-bottom: 20px; +} + +.feature-card__icon--gold { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.feature-card__icon--green { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.feature-card__icon--purple { + background: rgba(139, 92, 246, 0.15); + color: #7c3aed; +} + +.feature-card__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; +} + +.feature-card__desc { + font-size: 15px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0; +} + +/* ========================================================================= + PROCESS + ========================================================================= */ + +.process { + background: var(--color-white); + border-radius: 24px; + padding: 48px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.process__header { + margin-bottom: 48px; +} + +.process__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + margin: 0; +} + +.process__title span { + color: var(--color-primary); +} + +.process__steps { + display: flex; + flex-direction: column; + gap: 0; +} + +.process__step { + display: flex; + gap: 24px; + padding: 24px 0; + border-bottom: 1px solid var(--color-slate-100); +} + +.process__step:last-child { + border-bottom: none; +} + +.process__number { + flex-shrink: 0; + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border-radius: 16px; + font-size: 18px; + font-weight: 900; + color: var(--color-white); +} + +.process__content { + flex: 1; + padding-top: 4px; +} + +.process__step-title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 8px 0; +} + +.process__step-desc { + font-size: 15px; + color: var(--color-slate-500); + line-height: 1.6; + margin: 0; +} + +/* ========================================================================= + PRICING + ========================================================================= */ + +.pricing__header { + text-align: center; + margin-bottom: 48px; +} + +.pricing__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 12px 0; +} + +.pricing__title span { + color: var(--color-primary); +} + +.pricing__desc { + font-size: 18px; + color: var(--color-slate-500); + margin: 0; +} + +.pricing__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.pricing-card { + position: relative; + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: 24px; + padding: 32px; + display: flex; + flex-direction: column; + transition: all 0.3s ease; +} + +.pricing-card:hover { + border-color: var(--color-slate-300); +} + +.pricing-card--featured { + border-color: var(--color-primary); + box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); +} + +.pricing-card__badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + padding: 6px 16px; + background: var(--color-primary); + color: var(--color-white); + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + border-radius: 100px; +} + +.pricing-card__header { + margin-bottom: 24px; +} + +.pricing-card__name { + font-size: 24px; + font-weight: 800; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.pricing-card__desc { + font-size: 14px; + color: var(--color-slate-400); + margin: 0; +} + +.pricing-card__price { + margin-bottom: 24px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-slate-100); +} + +.pricing-card__amount { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); +} + +.pricing-card__currency { + font-size: 18px; + font-weight: 600; + color: var(--color-slate-400); +} + +.pricing-card__features { + list-style: none; + padding: 0; + margin: 0 0 32px 0; + flex: 1; +} + +.pricing-card__features li { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 0; + font-size: 15px; + color: var(--color-slate-600); +} + +.pricing-card__features li::before { + content: ''; + width: 20px; + height: 20px; + background: var(--color-success); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); + mask-size: contain; + flex-shrink: 0; +} + +/* ========================================================================= + WHY US + ========================================================================= */ + +.why-us { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; + background: var(--color-white); + border-radius: 24px; + padding: 48px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.why-us__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + margin: 0 0 32px 0; +} + +.why-us__title span { + color: var(--color-primary); +} + +.why-us__list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.why-us__item { + display: flex; + gap: 16px; +} + +.why-us__check { + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(16, 185, 129, 0.1); + border-radius: 12px; + color: var(--color-success); +} + +.why-us__item h4 { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.why-us__item p { + font-size: 14px; + color: var(--color-slate-500); + margin: 0; +} + +.why-us__image img { + width: 100%; + height: auto; + border-radius: 20px; +} + +/* ========================================================================= + FAQ + ========================================================================= */ + +.faq { + background: var(--color-white); + border-radius: 24px; + padding: 48px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.faq__header { + margin-bottom: 32px; +} + +.faq__title { + font-size: 36px; + font-weight: 900; + color: var(--color-dark); + margin: 0; +} + +.faq__title span { + color: var(--color-primary); +} + +.faq__list { + display: flex; + flex-direction: column; + gap: 0; +} + +.faq__item { + border-bottom: 1px solid var(--color-slate-100); +} + +.faq__item:last-child { + border-bottom: none; +} + +.faq__question { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + font-size: 17px; + font-weight: 600; + color: var(--color-dark); + cursor: pointer; + list-style: none; +} + +.faq__question::-webkit-details-marker { + display: none; +} + +.faq__icon { + flex-shrink: 0; + transition: transform 0.2s ease; + color: var(--color-slate-400); +} + +.faq__item[open] .faq__icon { + transform: rotate(180deg); +} + +.faq__answer { + padding-bottom: 20px; +} + +.faq__answer p { + font-size: 15px; + color: var(--color-slate-500); + line-height: 1.7; + margin: 0; +} + +/* ========================================================================= + CTA BOX + ========================================================================= */ + +.cta-box { + background: linear-gradient(135deg, var(--color-dark) 0%, #1e293b 100%); + border-radius: 24px; + padding: 64px; + text-align: center; +} + +.cta-box__title { + font-size: 36px; + font-weight: 900; + color: var(--color-white); + margin: 0 0 16px 0; +} + +.cta-box__title span { + color: var(--color-primary); +} + +.cta-box__desc { + font-size: 18px; + color: var(--color-slate-400); + max-width: 500px; + margin: 0 auto 32px auto; +} + +.cta-box__actions { + display: flex; + gap: 16px; + justify-content: center; +} + +/* ========================================================================= + TESTIMONIAL + ========================================================================= */ + +.testimonial { + position: relative; + background: var(--color-white); + border-radius: 24px; + padding: 48px; + text-align: center; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.testimonial__quote { + position: absolute; + top: 32px; + left: 48px; + color: var(--color-primary); +} + +.testimonial__text { + font-size: 24px; + font-weight: 500; + color: var(--color-dark); + line-height: 1.6; + max-width: 700px; + margin: 0 auto 32px auto; +} + +.testimonial__author { + display: inline-flex; + align-items: center; + gap: 16px; +} + +.testimonial__avatar { + width: 56px; + height: 56px; + border-radius: 50%; + object-fit: cover; +} + +.testimonial__name { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); + text-align: left; +} + +.testimonial__role { + font-size: 14px; + color: var(--color-slate-400); + text-align: left; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .service-hero { + grid-template-columns: 1fr; + } + + .pricing__grid { + grid-template-columns: 1fr; + max-width: 400px; + margin: 0 auto; + } + + .why-us { + grid-template-columns: 1fr; + } + + .why-us__image { + order: -1; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .service-hero { + padding: 32px; + } + + .service-hero__stats { + flex-direction: column; + gap: 16px; + } + + .service-hero__actions { + flex-direction: column; + } + + .features__grid { + grid-template-columns: 1fr; + } + + .features, + .process, + .faq, + .testimonial { + padding: 32px; + } + + .cta-box { + padding: 32px; + } + + .cta-box__actions { + flex-direction: column; + } +} diff --git a/skills/documatica-v12-design-system/references/service-page.html b/skills/documatica-v12-design-system/references/service-page.html new file mode 100644 index 00000000..ef998e0f --- /dev/null +++ b/skills/documatica-v12-design-system/references/service-page.html @@ -0,0 +1,469 @@ + + + + + + Service Page — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ PAGES +

Service Page

+

Шаблоны страниц услуг. Hero-секции, преимущества, процессы, цены, FAQ, CTA.

+
+ + +
+
+ 01 +

Service Hero

+
+ +
+
+ Веб-разработка +

Создаём сайты, которые продают

+

Разработка современных веб-приложений с фокусом на конверсию, производительность и удобство использования.

+
+ + +
+
+
+ 150+ + Проектов +
+
+ 98% + Довольных клиентов +
+
+ 7 лет + На рынке +
+
+
+
+ Service +
+
+
+ + +
+
+ 02 +

Features Grid

+
+ +
+
+

Что мы предлагаем

+

Полный спектр услуг для создания успешного веб-присутствия

+
+
+
+
+ + + +
+

Дизайн интерфейсов

+

Создаём удобные и красивые интерфейсы, которые помогают достигать бизнес-целей.

+
+
+
+ + + +
+

Разработка

+

Фронтенд и бэкенд на современных технологиях: React, Next.js, Node.js, Python.

+
+
+
+ + + +
+

Оптимизация

+

SEO, производительность, Core Web Vitals — всё для высоких позиций в поиске.

+
+
+
+ + + +
+

Интеграции

+

Подключение CRM, платёжных систем, аналитики и любых внешних сервисов.

+
+
+
+
+ + +
+
+ 03 +

Process Steps

+
+ +
+
+

Как мы работаем

+
+
+
+
01
+
+

Анализ

+

Изучаем ваш бизнес, конкурентов, целевую аудиторию и формируем техническое задание.

+
+
+
+
02
+
+

Проектирование

+

Создаём структуру сайта, прототипы страниц и продумываем пользовательские сценарии.

+
+
+
+
03
+
+

Дизайн

+

Разрабатываем визуальную концепцию и детальный дизайн всех страниц и состояний.

+
+
+
+
04
+
+

Разработка

+

Верстаем, программируем, интегрируем и тестируем — готовим к запуску.

+
+
+
+
05
+
+

Запуск

+

Выкатываем проект, настраиваем аналитику и обучаем вашу команду.

+
+
+
+
+
+ + +
+
+ 04 +

Pricing Cards

+
+ +
+
+

Тарифы и цены

+

Выберите подходящий пакет или закажите индивидуальный расчёт

+
+
+
+
+

Старт

+

Для малого бизнеса

+
+
+ 150 000 + ₽ +
+
    +
  • До 5 страниц
    • +
  • Адаптивный дизайн
    • +
  • Базовое SEO
    • +
  • Форма обратной связи
    • +
  • 1 месяц поддержки
    • +
+ +
+ +
+
Популярный
+
+

Бизнес

+

Для среднего бизнеса

+
+
+ 350 000 + ₽ +
+
    +
  • До 15 страниц
    • +
  • Уникальный дизайн
    • +
  • Полное SEO
    • +
  • CMS-система
    • +
  • Интеграция CRM
    • +
  • 3 месяца поддержки
    • +
+ +
+ +
+
+

Корпоратив

+

Для крупных компаний

+
+
+ от 700 000 + ₽ +
+
    +
  • Неограниченно страниц
    • +
  • Дизайн-система
    • +
  • Мультиязычность
    • +
  • Личный кабинет
    • +
  • Кастомная CMS
    • +
  • Годовая поддержка
    • +
+ +
+
+
+
+ + +
+
+ 05 +

Why Choose Us

+
+ +
+
+

Почему выбирают нас

+
+
+
+ + + +
+
+

Фиксированная цена

+

Стоимость проекта не меняется после согласования ТЗ

+
+
+
+
+ + + +
+
+

Гарантия сроков

+

Работаем по договору с пеней за просрочку

+
+
+
+
+ + + +
+
+

Прозрачный процесс

+

Доступ к Trello/Notion с задачами и статусами

+
+
+
+
+ + + +
+
+

Поддержка после запуска

+

Бесплатные правки в течение гарантийного периода

+
+
+
+
+
+ Team +
+
+
+ + +
+
+ 06 +

FAQ Accordion

+
+ +
+
+

Частые вопросы

+
+
+
+ + Сколько времени занимает разработка сайта? + + + + +
+

Сроки зависят от сложности проекта. Лендинг — 2-3 недели, корпоративный сайт — 1-2 месяца, интернет-магазин или портал — от 2 до 6 месяцев. Точные сроки определяем после изучения требований.

+
+
+
+ + Какие технологии вы используете? + + + + +
+

На фронтенде — React, Next.js, Vue.js. На бэкенде — Node.js, Python, PHP. Для CMS используем 1С-Битрикс, WordPress или собственные решения в зависимости от задач.

+
+
+
+ + Можно ли вносить правки в процессе работы? + + + + +
+

Да, на каждом этапе предусмотрены итерации правок. Мы согласовываем прототипы и дизайн перед разработкой, чтобы минимизировать изменения на поздних стадиях.

+
+
+
+ + Что входит в стоимость поддержки? + + + + +
+

Хостинг, SSL-сертификат, резервное копирование, мониторинг работоспособности, мелкие правки контента, обновление CMS и плагинов, консультации по работе с сайтом.

+
+
+
+
+
+ + +
+
+ 07 +

CTA Section

+
+ +
+
+

Готовы начать проект?

+

Оставьте заявку, и мы свяжемся с вами в течение 2 часов для бесплатной консультации.

+
+ + +
+
+
+
+ + +
+
+ 08 +

Testimonial

+
+ +
+
+ + + +
+
+ «Работа с командой превзошла все ожидания. Сайт был готов в срок, конверсия выросла на 40% уже в первый месяц после запуска. Рекомендую!» +
+
+ Author +
+
Мария Иванова
+
CEO, TechStart
+
+
+
+
+ + +
+
+ 09 +

Использование

+
+ +
+ 
/* Секции страницы услуги */
+<div class="service-hero">...</div>
+<div class="features">...</div>
+<div class="process">...</div>
+<div class="pricing">...</div>
+<div class="why-us">...</div>
+<div class="faq">...</div>
+<div class="cta-box">...</div>
+<div class="testimonial">...</div>
+
+/* Карточки цен */
+.pricing-card              /* Обычная */
+.pricing-card--featured    /* Выделенная */
+
+/* Feature иконки */
+.feature-card__icon           /* Синяя (default) */
+.feature-card__icon--gold     /* Жёлтая */
+.feature-card__icon--green    /* Зелёная */
+.feature-card__icon--purple   /* Фиолетовая */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/sidebar.css b/skills/documatica-v12-design-system/references/sidebar.css new file mode 100644 index 00000000..67158ad5 --- /dev/null +++ b/skills/documatica-v12-design-system/references/sidebar.css @@ -0,0 +1,1110 @@ +/** + * Documatica Design System v12.0 + * Sidebar Components + */ + +/* ========================================================================= + DOCS STYLES + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--color-white); + color: var(--color-dark); + line-height: 1.6; + background-image: radial-gradient(circle, rgba(59, 130, 246, 0.08) 1px, transparent 1px); + background-size: 24px 24px; +} + +.docs-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-8) 0 var(--spacing-6); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.docs-header { + padding-bottom: var(--spacing-16); +} + +.docs-header__badge { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-slate-300); +} + +.status-dot--active { + background: var(--color-smart); + box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); +} + +.docs-header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + line-height: 0.95; + letter-spacing: -0.02em; + color: var(--color-dark); + margin: 0 0 var(--spacing-6) 0; +} + +.text-primary { + color: var(--color-primary); +} + +.docs-header__desc { + font-size: var(--font-size-lg); + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +.docs-section { + padding: var(--spacing-10) 0; +} + +.section-header { + display: flex; + align-items: baseline; + gap: var(--spacing-4); + margin-bottom: var(--spacing-4); +} + +.section-index { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.section-title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin: 0; +} + +.section-desc { + font-size: var(--font-size-base); + color: var(--color-slate-500); + margin: 0 0 var(--spacing-6) 0; +} + +.docs-footer { + border-top: 1px solid var(--color-slate-200); + padding: var(--spacing-10) 0; + margin-top: var(--spacing-16); +} + +.docs-footer__inner { + display: flex; + align-items: center; + justify-content: space-between; +} + +.docs-footer p { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + margin: 0; +} + +.ai-status { + display: flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-500); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* ========================================================================= + LAYOUT DEMO + ========================================================================= */ + +.layout-demo { + display: flex; + min-height: 500px; + border: 1px solid var(--color-slate-200); + border-radius: 20px; + overflow: hidden; + background: var(--color-white); +} + +.layout-demo--small { + min-height: 320px; +} + +.layout-demo--reverse { + flex-direction: row-reverse; +} + +.main-content { + flex: 1; + background: var(--color-slate-50); + background-image: radial-gradient(circle, rgba(59, 130, 246, 0.06) 1px, transparent 1px); + background-size: 20px 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.main-content--wide { + flex: 1.5; +} + +.main-content--article { + flex: 2; +} + +.main-content__placeholder { + font-size: var(--font-size-lg); + color: var(--color-slate-400); +} + +/* ========================================================================= + SIDEBAR BASE + ========================================================================= */ + +.sidebar { + width: 260px; + background: var(--color-white); + border-right: 1px solid var(--color-slate-200); + display: flex; + flex-direction: column; +} + +.sidebar__header { + padding: var(--spacing-5); + border-bottom: 1px solid var(--color-slate-100); +} + +.sidebar__logo { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.sidebar__logo--icon { + justify-content: center; +} + +.sidebar__brand { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.sidebar__brand span { + color: var(--color-primary); +} + +/* Navigation */ +.sidebar__nav { + flex: 1; + padding: var(--spacing-4); + overflow-y: auto; +} + +.sidebar__section { + margin-bottom: var(--spacing-6); +} + +.sidebar__section-label { + display: block; + font-size: 11px; + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.1em; + padding: var(--spacing-2) var(--spacing-3); + margin-bottom: var(--spacing-2); +} + +.sidebar__link { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-4); + border-radius: 12px; + color: var(--color-slate-600); + text-decoration: none; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + transition: all 0.2s ease; + margin-bottom: 2px; +} + +.sidebar__link svg { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.sidebar__link:hover { + background: var(--color-slate-100); + color: var(--color-dark); +} + +.sidebar__link--active { + background: var(--color-primary); + color: var(--color-white); +} + +.sidebar__link--active:hover { + background: var(--color-primary); + color: var(--color-white); +} + +/* Badges */ +.sidebar__badge { + margin-left: auto; + padding: 2px 8px; + font-size: 11px; + font-weight: var(--font-weight-bold); + border-radius: 10px; + background: var(--color-slate-200); + color: var(--color-slate-600); +} + +.sidebar__badge--danger { + background: var(--color-danger); + color: var(--color-white); +} + +.sidebar__badge--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +/* Footer */ +.sidebar__footer { + padding: var(--spacing-4); + border-top: 1px solid var(--color-slate-100); +} + +.sidebar__status { + display: flex; + align-items: center; + gap: var(--spacing-2); + font-size: 10px; + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-4); +} + +.sidebar__user { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.sidebar__avatar { + width: 40px; + height: 40px; + background: var(--color-primary); + color: var(--color-white); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); +} + +.sidebar__user-info { + flex: 1; +} + +.sidebar__user-name { + display: block; + font-size: 11px; + font-weight: var(--font-weight-bold); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.sidebar__user-role { + display: block; + font-size: 10px; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.sidebar__user-btn { + width: 32px; + height: 32px; + background: none; + border: 1px solid var(--color-slate-200); + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-slate-400); + transition: all 0.2s ease; +} + +.sidebar__user-btn:hover { + border-color: var(--color-slate-300); + color: var(--color-slate-600); +} + +.sidebar__user-btn svg { + width: 16px; + height: 16px; +} + +/* ========================================================================= + COLLAPSED SIDEBAR + ========================================================================= */ + +.sidebar--collapsed { + width: 72px; +} + +.sidebar--collapsed .sidebar__nav { + padding: var(--spacing-3); +} + +.sidebar--collapsed .sidebar__link { + justify-content: center; + padding: var(--spacing-3); +} + +.sidebar--collapsed .sidebar__status { + justify-content: center; + margin-bottom: var(--spacing-3); +} + +.sidebar--collapsed .sidebar__user { + justify-content: center; +} + +/* ========================================================================= + DARK SIDEBAR + ========================================================================= */ + +.sidebar--dark { + background: var(--color-dark); + border-right-color: rgba(255, 255, 255, 0.1); +} + +.sidebar--dark .sidebar__header { + border-bottom-color: rgba(255, 255, 255, 0.1); +} + +.sidebar--dark .sidebar__brand { + color: var(--color-white); +} + +.sidebar--dark .sidebar__section-label { + color: var(--color-slate-500); +} + +.sidebar--dark .sidebar__link { + color: var(--color-slate-400); +} + +.sidebar--dark .sidebar__link:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--color-white); +} + +.sidebar--dark .sidebar__link--active { + background: var(--color-primary); + color: var(--color-white); +} + +.sidebar--dark .sidebar__footer { + border-top-color: rgba(255, 255, 255, 0.1); +} + +.sidebar--dark .sidebar__user-name { + color: var(--color-white); +} + +/* ========================================================================= + FILTERS SIDEBAR + ========================================================================= */ + +.sidebar--filters { + width: 280px; + padding: 0; +} + +.sidebar--filters .sidebar__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-5); +} + +.filters__title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin: 0; +} + +.filters__clear { + background: none; + border: none; + font-size: var(--font-size-sm); + color: var(--color-primary); + cursor: pointer; +} + +.filters__content { + flex: 1; + padding: 0 var(--spacing-5); + overflow-y: auto; +} + +.filter-group { + margin-bottom: var(--spacing-6); + padding-bottom: var(--spacing-6); + border-bottom: 1px solid var(--color-slate-100); +} + +.filter-group:last-child { + border-bottom: none; +} + +.filter-group__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--spacing-4); + cursor: pointer; +} + +.filter-group__title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.filter-group__header svg { + width: 16px; + height: 16px; + color: var(--color-slate-400); +} + +.filter-option { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-2) 0; + cursor: pointer; + font-size: var(--font-size-sm); +} + +.filter-option input { + display: none; +} + +.filter-option__check, +.filter-option__radio { + width: 18px; + height: 18px; + border: 2px solid var(--color-slate-300); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.filter-option__radio { + border-radius: 50%; +} + +.filter-option input:checked + .filter-option__check, +.filter-option input:checked + .filter-option__radio { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.filter-option input:checked + .filter-option__check::after { + content: '✓'; + color: white; + font-size: 12px; + font-weight: bold; +} + +.filter-option input:checked + .filter-option__radio::after { + content: ''; + width: 6px; + height: 6px; + background: white; + border-radius: 50%; +} + +.filter-option__label { + flex: 1; + color: var(--color-slate-600); +} + +.filter-option__count { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +.filter-option__stars { + color: var(--color-smart); + flex: 1; +} + +/* Price Range */ +.price-range { + display: flex; + align-items: center; + gap: var(--spacing-2); + margin-bottom: var(--spacing-4); +} + +.price-range__input { + flex: 1; +} + +.price-range__input label { + display: block; + font-size: 10px; + color: var(--color-slate-400); + margin-bottom: 4px; + text-transform: uppercase; +} + +.price-range__input input { + width: 100%; + padding: var(--spacing-2) var(--spacing-3); + border: 1px solid var(--color-slate-200); + border-radius: 8px; + font-size: var(--font-size-sm); +} + +.price-range__sep { + color: var(--color-slate-400); + padding-top: 16px; +} + +.price-slider__track { + height: 4px; + background: var(--color-slate-200); + border-radius: 2px; + position: relative; +} + +.price-slider__fill { + position: absolute; + left: 10%; + right: 20%; + height: 100%; + background: var(--color-primary); + border-radius: 2px; +} + +/* Filter Search */ +.filter-search { + position: relative; + margin-bottom: var(--spacing-3); +} + +.filter-search input { + width: 100%; + padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 36px; + border: 1px solid var(--color-slate-200); + border-radius: 8px; + font-size: var(--font-size-sm); +} + +.filter-search svg { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: var(--color-slate-400); +} + +.sidebar--filters .sidebar__footer { + padding: var(--spacing-5); +} + +/* ========================================================================= + BLOG SIDEBAR + ========================================================================= */ + +.sidebar--blog { + width: 320px; + background: transparent; + border-right: none; + border-left: 1px solid var(--color-slate-200); + padding: var(--spacing-6); +} + +.blog-widget { + margin-bottom: var(--spacing-8); +} + +.blog-widget__title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-dark); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0 0 var(--spacing-4) 0; +} + +.blog-search { + position: relative; +} + +.blog-search input { + width: 100%; + padding: var(--spacing-3) var(--spacing-4); + padding-right: 44px; + border: 1px solid var(--color-slate-200); + border-radius: 12px; + font-size: var(--font-size-sm); + background: var(--color-white); +} + +.blog-search svg { + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + color: var(--color-slate-400); +} + +.blog-categories { + list-style: none; + padding: 0; + margin: 0; +} + +.blog-categories li { + margin-bottom: var(--spacing-2); +} + +.blog-categories a { + display: flex; + justify-content: space-between; + padding: var(--spacing-2) 0; + color: var(--color-slate-600); + text-decoration: none; + font-size: var(--font-size-sm); + transition: color 0.2s ease; +} + +.blog-categories a:hover { + color: var(--color-primary); +} + +.blog-categories span { + color: var(--color-slate-400); +} + +/* Popular Posts */ +.blog-popular { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.popular-post { + display: flex; + gap: var(--spacing-3); + text-decoration: none; +} + +.popular-post__image { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--color-primary), #8b5cf6); + border-radius: 10px; + flex-shrink: 0; +} + +.popular-post__content { + display: flex; + flex-direction: column; + justify-content: center; +} + +.popular-post__title { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + line-height: 1.4; + margin-bottom: 4px; +} + +.popular-post:hover .popular-post__title { + color: var(--color-primary); +} + +.popular-post__date { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +/* Tags */ +.blog-tags { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-2); +} + +.blog-tag { + padding: var(--spacing-1) var(--spacing-3); + background: var(--color-slate-100); + color: var(--color-slate-600); + border-radius: 20px; + font-size: var(--font-size-xs); + text-decoration: none; + transition: all 0.2s ease; +} + +.blog-tag:hover { + background: var(--color-primary); + color: var(--color-white); +} + +/* CTA Widget */ +.blog-widget--cta { + background: var(--color-primary); + border-radius: 16px; + padding: var(--spacing-6); + color: var(--color-white); +} + +.blog-cta__badge { + display: inline-block; + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.1em; + background: rgba(255, 255, 255, 0.2); + padding: 4px 10px; + border-radius: 20px; + margin-bottom: var(--spacing-3); +} + +.blog-cta__title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + margin: 0 0 var(--spacing-2) 0; + color: var(--color-white); +} + +.blog-cta__desc { + font-size: var(--font-size-sm); + color: rgba(255, 255, 255, 0.8); + margin: 0 0 var(--spacing-4) 0; +} + +.blog-cta__form { + display: flex; + gap: var(--spacing-2); +} + +.blog-cta__form input { + flex: 1; + padding: var(--spacing-3); + border: none; + border-radius: 10px; + font-size: var(--font-size-sm); +} + +.blog-cta__form .btn { + padding: var(--spacing-3) var(--spacing-4); + min-width: auto; +} + +/* ========================================================================= + MOBILE SIDEBAR + ========================================================================= */ + +.mobile-demo { + display: flex; + justify-content: center; + padding: var(--spacing-8); + background: var(--color-slate-100); + border-radius: 20px; +} + +.mobile-frame { + width: 320px; + height: 568px; + background: var(--color-white); + border: 3px solid var(--color-dark); + border-radius: 32px; + overflow: hidden; + position: relative; +} + +.mobile-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-4); + background: var(--color-white); + border-bottom: 1px solid var(--color-slate-200); + position: relative; + z-index: 10; +} + +.mobile-hamburger { + display: flex; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + padding: 4px; +} + +.mobile-hamburger span { + width: 20px; + height: 2px; + background: var(--color-dark); + border-radius: 2px; +} + +.mobile-title { + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.mobile-avatar { + width: 32px; + height: 32px; + background: var(--color-primary); + color: var(--color-white); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: var(--font-weight-bold); +} + +.mobile-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 5; +} + +.mobile-sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 260px; + background: var(--color-white); + z-index: 20; + display: flex; + flex-direction: column; +} + +.mobile-sidebar__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-100); + font-weight: var(--font-weight-bold); +} + +.mobile-close { + width: 32px; + height: 32px; + background: var(--color-slate-100); + border: none; + border-radius: 8px; + font-size: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.mobile-sidebar__nav { + padding: var(--spacing-4); +} + +.mobile-link { + display: flex; + align-items: center; + gap: var(--spacing-3); + padding: var(--spacing-3) var(--spacing-4); + border-radius: 10px; + color: var(--color-slate-600); + text-decoration: none; + font-size: var(--font-size-sm); + margin-bottom: 2px; +} + +.mobile-link svg { + width: 20px; + height: 20px; +} + +.mobile-link--active { + background: var(--color-primary); + color: var(--color-white); +} + +.mobile-content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2); + padding: var(--spacing-3) var(--spacing-6); + font-family: inherit; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.03em; + text-decoration: none; + border: none; + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; +} + +.btn--block { + width: 100%; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + overflow: hidden; + margin-bottom: var(--spacing-6); +} + +.code-block__header { + background: rgba(255, 255, 255, 0.1); + padding: var(--spacing-3) var(--spacing-4); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.code-block__header span { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.code-block pre { + margin: 0; + padding: var(--spacing-6); + overflow-x: auto; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 992px) { + .layout-demo { + flex-direction: column; + min-height: auto; + } + + .layout-demo--reverse { + flex-direction: column; + } + + .sidebar, + .sidebar--blog { + width: 100%; + border-right: none; + border-left: none; + border-bottom: 1px solid var(--color-slate-200); + } + + .main-content { + min-height: 200px; + } +} + +@media (max-width: 768px) { + .docs-container { + padding: 0 var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/sidebar.html b/skills/documatica-v12-design-system/references/sidebar.html new file mode 100644 index 00000000..20d1ab9d --- /dev/null +++ b/skills/documatica-v12-design-system/references/sidebar.html @@ -0,0 +1,729 @@ + + + + + + Sidebar — Documatica v12.0 + + + + + + +
+ + + ← Вернуться к компонентам + + +
+
+ + SIDEBAR PROTOCOL V12.0 +
+

+ БОКОВЫЕ
+ ПАНЕЛИ. +

+

+ Навигационные сайдбары в стиле Documatica.
+ Секции, иконки, статусы и адаптивность. +

+
+ + +
+
+ 01 +

Базовый сайдбар

+
+

Стандартный сайдбар Documatica с секциями и навигацией.

+ +
+ + +
+
+ Основной контент +
+
+
+
+ + +
+
+ 02 +

С бейджами и уведомлениями

+
+ +
+ +
+
+ + +
+
+ 03 +

Свёрнутый сайдбар

+
+

Компактный режим только с иконками.

+ +
+ + +
+
+ Расширенная область контента +
+
+
+
+ + +
+
+ 04 +

Тёмный сайдбар

+
+ +
+ + +
+
+ Основной контент +
+
+
+
+ + +
+
+ 05 +

Фильтры (E-Commerce)

+
+

Сайдбар для фильтрации товаров в каталоге.

+ +
+ + +
+
+ Сетка товаров +
+
+
+
+ + +
+
+ 06 +

Сайдбар блога

+
+ +
+
+
+ Статья блога +
+
+ + +
+
+ + +
+
+ 07 +

Мобильный сайдбар

+
+

Off-canvas меню для мобильных устройств.

+ +
+
+
+ + Documatica +
JD
+
+ +
+ + + +
+ Tap hamburger → +
+
+
+
+ + +
+
+ 08 +

Код

+
+ +
+
+ HTML +
+ 
<aside class="sidebar">
+    <div class="sidebar__header">
+        <div class="sidebar__logo">
+            <svg>...</svg>
+            <span class="sidebar__brand">docu<span>matica</span></span>
+        </div>
+    </div>
+
+    <nav class="sidebar__nav">
+        <div class="sidebar__section">
+            <span class="sidebar__section-label">ОСНОВНОЕ УПРАВЛЕНИЕ</span>
+            <a class="sidebar__link sidebar__link--active">
+                <svg>...</svg>
+                Дашборд
+            </a>
+            <a class="sidebar__link">
+                <svg>...</svg>
+                Документы
+                <span class="sidebar__badge">24</span>
+            </a>
+        </div>
+    </nav>
+
+    <div class="sidebar__footer">
+        <div class="sidebar__status">
+            <span class="status-dot status-dot--active"></span>
+            AI CORE ACTIVE
+        </div>
+        <div class="sidebar__user">
+            <div class="sidebar__avatar">JD</div>
+            <div class="sidebar__user-info">
+                <span class="sidebar__user-name">JOHN DOCUMATICA</span>
+                <span class="sidebar__user-role">ADMINISTRATOR</span>
+            </div>
+        </div>
+    </div>
+</aside>
+
+<!-- Варианты -->
+<aside class="sidebar sidebar--collapsed">...</aside>
+<aside class="sidebar sidebar--dark">...</aside>
+<aside class="sidebar sidebar--filters">...</aside>
+<aside class="sidebar sidebar--blog">...</aside>
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/sliders.css b/skills/documatica-v12-design-system/references/sliders.css new file mode 100644 index 00000000..46b9e3b1 --- /dev/null +++ b/skills/documatica-v12-design-system/references/sliders.css @@ -0,0 +1,505 @@ +/** + * Documatica Design System v12.0 + * Slider Components + */ + +.container { + max-width: 700px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + SLIDER BASE + ========================================================================= */ + +.slider { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 8px; + background: var(--color-slate-200); + border-radius: var(--radius-full); + outline: none; + cursor: pointer; + transition: var(--transition-base); +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 24px; + height: 24px; + background: var(--color-primary); + border-radius: var(--radius-full); + cursor: grab; + border: 4px solid var(--color-white); + box-shadow: var(--shadow-md); + transition: var(--transition-spring); +} + +.slider::-moz-range-thumb { + width: 24px; + height: 24px; + background: var(--color-primary); + border-radius: var(--radius-full); + cursor: grab; + border: 4px solid var(--color-white); + box-shadow: var(--shadow-md); + transition: var(--transition-spring); +} + +.slider:hover::-webkit-slider-thumb { + transform: scale(1.15); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), var(--shadow-lg); +} + +.slider:hover::-moz-range-thumb { + transform: scale(1.15); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), var(--shadow-lg); +} + +.slider:active::-webkit-slider-thumb { + cursor: grabbing; + transform: scale(1.1); +} + +.slider:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.slider:disabled::-webkit-slider-thumb { + cursor: not-allowed; +} + +/* Sizes */ +.slider--sm { + height: 4px; +} + +.slider--sm::-webkit-slider-thumb { + width: 18px; + height: 18px; + border-width: 3px; +} + +.slider--lg { + height: 12px; +} + +.slider--lg::-webkit-slider-thumb { + width: 28px; + height: 28px; +} + +/* Colors */ +.slider--primary::-webkit-slider-thumb { + background: var(--color-primary); +} + +.slider--smart::-webkit-slider-thumb { + background: var(--color-smart); +} + +.slider--smart:hover::-webkit-slider-thumb { + box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2), var(--shadow-lg); +} + +.slider--success::-webkit-slider-thumb { + background: var(--color-success); +} + +.slider--success:hover::-webkit-slider-thumb { + box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), var(--shadow-lg); +} + +.slider--danger::-webkit-slider-thumb { + background: var(--color-danger); +} + +.slider--danger:hover::-webkit-slider-thumb { + box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2), var(--shadow-lg); +} + +/* Hover Demo */ +.slider--hover-demo::-webkit-slider-thumb { + transform: scale(1.15); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), var(--shadow-lg); +} + +/* ========================================================================= + SLIDER GROUP + ========================================================================= */ + +.slider-group { + margin-bottom: var(--spacing-6); +} + +.slider-label { + display: block; + margin-bottom: var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.slider-value { + display: block; + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + color: var(--color-slate-500); + text-align: right; +} + +.slider-value--highlight { + font-weight: var(--font-weight-bold); + color: var(--color-primary); + font-size: var(--font-size-lg); +} + +.sliders-list { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +/* With Labels */ +.slider-wrap--labeled { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.slider-min, +.slider-max { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + white-space: nowrap; +} + +/* ========================================================================= + RANGE SLIDER (DUAL) + ========================================================================= */ + +.range-slider { + position: relative; + height: 8px; +} + +.range-slider__track { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background: var(--color-slate-200); + border-radius: var(--radius-full); +} + +.range-slider__fill { + position: absolute; + top: 0; + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); +} + +.range-slider__input { + position: absolute; + top: -8px; + left: 0; + width: 100%; + height: 24px; + -webkit-appearance: none; + appearance: none; + background: transparent; + pointer-events: none; +} + +.range-slider__input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 24px; + height: 24px; + background: var(--color-primary); + border-radius: var(--radius-full); + cursor: grab; + border: 4px solid var(--color-white); + box-shadow: var(--shadow-md); + pointer-events: all; + transition: var(--transition-spring); +} + +.range-slider__input::-webkit-slider-thumb:hover { + transform: scale(1.15); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), var(--shadow-lg); +} + +.slider-range-values { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-3); + margin-top: var(--spacing-4); +} + +.slider-range-value { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.slider-range-sep { + color: var(--color-slate-300); +} + +/* ========================================================================= + STEPPED SLIDER + ========================================================================= */ + +.slider-steps { + display: flex; + justify-content: space-between; + margin-top: var(--spacing-3); +} + +.slider-step { + font-size: var(--font-size-xs); + color: var(--color-slate-400); + text-align: center; +} + +/* ========================================================================= + VERTICAL SLIDER + ========================================================================= */ + +.vertical-sliders { + display: flex; + justify-content: center; + gap: var(--spacing-10); + padding: var(--spacing-8); + background: var(--color-dark); + border-radius: var(--radius-2xl); +} + +.vertical-slider-group { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-4); +} + +.vertical-slider-group .slider-label { + color: var(--color-slate-400); + margin: 0; +} + +.slider--vertical { + writing-mode: vertical-lr; + direction: rtl; + width: 8px; + height: 150px; + background: var(--color-slate-700); +} + +.slider--vertical::-webkit-slider-thumb { + border-color: var(--color-dark); +} + +/* ========================================================================= + TOOLTIP SLIDER + ========================================================================= */ + +.slider-tooltip-wrap { + position: relative; + padding-top: var(--spacing-8); +} + +.slider-tooltip { + position: absolute; + top: 0; + transform: translateX(-50%); + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-dark); + border-radius: var(--radius-lg); + white-space: nowrap; +} + +.slider-tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-top-color: var(--color-dark); +} + +/* ========================================================================= + SMART SLIDER + ========================================================================= */ + +.smart-slider { + padding: var(--spacing-6); + background: var(--color-dark); + border-radius: var(--radius-2xl); + border: 1px solid var(--color-slate-700); +} + +.smart-slider__header { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-5); +} + +.smart-slider__icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(251, 191, 36, 0.15); + border-radius: var(--radius-lg); + color: var(--color-smart); +} + +.smart-slider__icon svg { + width: 20px; + height: 20px; +} + +.smart-slider__label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-white); +} + +.smart-slider .slider { + background: var(--color-slate-700); +} + +.smart-slider .slider::-webkit-slider-thumb { + border-color: var(--color-dark); +} + +.smart-slider__hints { + display: flex; + justify-content: space-between; + margin-top: var(--spacing-4); +} + +.smart-slider__hint { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.smart-slider__hint--active { + color: var(--color-smart); + font-weight: var(--font-weight-medium); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/sliders.html b/skills/documatica-v12-design-system/references/sliders.html new file mode 100644 index 00000000..426a476c --- /dev/null +++ b/skills/documatica-v12-design-system/references/sliders.html @@ -0,0 +1,218 @@ + + + + + + Sliders — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Slider Protocol v12.0 +
+

+ Sliders +

+
+ + +
+

01. Basic Slider

+
+ +
+ +
+ 50% +
+
+ + +
+

02. With Min/Max Labels

+
+ +
+ $0 + + $100K +
+ $35,000 +
+
+ + +
+

03. Range Slider (Dual Handles)

+
+ +
+
+
+
+ + +
+
+ $200 + — + $700 +
+
+
+ + +
+

04. Sizes

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

05. Color Variants

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

06. With Steps / Markers

+
+ +
+ +
+
+ Низкое + Среднее + Высокое + Отличное + Макс +
+
+
+ + +
+

07. States

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

08. Vertical Slider

+
+
+ + Bass +
+
+ + Mid +
+
+ + Treble +
+
+
+ + +
+

09. With Tooltip

+
+ +
+ +
75%
+
+
+
+ + +
+

10. AI Smart Slider

+
+
+ + + + + + AI Уровень креативности +
+
+ +
+
+ Точный + Баланс + Креативный +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/social.css b/skills/documatica-v12-design-system/references/social.css new file mode 100644 index 00000000..5cef201a --- /dev/null +++ b/skills/documatica-v12-design-system/references/social.css @@ -0,0 +1,800 @@ +/** + * UI Kit v12.0 — Social Media + * Share buttons, social widgets, profiles + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + color: var(--color-smart); + letter-spacing: 0.15em; + margin-bottom: 16px; +} + +.hero__title { + font-size: clamp(48px, 10vw, 80px); + font-weight: 900; + color: var(--color-dark); + line-height: 0.95; + margin: 0 0 24px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 500px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 80px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.section__number { + font-size: 12px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 0.1em; +} + +.section__title { + font-size: 14px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + margin: 0; +} + +/* ========================================================================= + BUTTONS + ========================================================================= */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 28px; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-dark); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.btn--primary:hover { + background: #2563eb; + transform: translateY(-2px); +} + +.btn--full { + width: 100%; +} + +/* ========================================================================= + SHARE BUTTONS + ========================================================================= */ + +.share-block { + display: flex; + align-items: center; + gap: 20px; + background: var(--color-white); + border-radius: 20px; + padding: 24px 32px; +} + +.share-label { + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); +} + +.share-buttons { + display: flex; + gap: 12px; +} + +.share-btn { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + border: none; + border-radius: 14px; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.share-btn:hover { + transform: translateY(-3px); +} + +.share-btn--telegram { + background: #26A5E4; + color: white; +} + +.share-btn--telegram:hover { + background: #1e96d2; + box-shadow: 0 8px 20px rgba(38, 165, 228, 0.3); +} + +.share-btn--whatsapp { + background: #25D366; + color: white; +} + +.share-btn--whatsapp:hover { + background: #20bd5a; + box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); +} + +.share-btn--vk { + background: #0077FF; + color: white; +} + +.share-btn--vk:hover { + background: #006ae6; + box-shadow: 0 8px 20px rgba(0, 119, 255, 0.3); +} + +.share-btn--twitter { + background: var(--color-dark); + color: white; +} + +.share-btn--twitter:hover { + background: #1a1a1a; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} + +.share-btn--copy:hover { + background: var(--color-primary); + color: white; + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); +} + +/* ========================================================================= + SOCIAL ICONS + ========================================================================= */ + +.demo-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.demo-card { + background: var(--color-white); + border-radius: 20px; + padding: 28px; + text-align: center; +} + +.demo-card__label { + display: block; + font-size: 12px; + font-weight: 700; + color: var(--color-slate-400); + letter-spacing: 0.1em; + text-transform: uppercase; + margin-bottom: 20px; +} + +.social-icons { + display: flex; + justify-content: center; + gap: 12px; +} + +.social-icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-100); + color: var(--color-slate-500); + text-decoration: none; + transition: all 0.2s ease; +} + +.social-icon:hover { + transform: translateY(-3px); +} + +/* Circle */ +.social-icons--circle .social-icon { + border-radius: 50%; +} + +/* Square */ +.social-icons--square .social-icon { + border-radius: 12px; +} + +/* Minimal */ +.social-icons--minimal .social-icon { + background: transparent; + border-radius: 12px; +} + +.social-icons--minimal .social-icon:hover { + background: var(--color-slate-100); +} + +/* Colors */ +.social-icon--telegram:hover { + background: #26A5E4; + color: white; +} + +.social-icon--whatsapp:hover { + background: #25D366; + color: white; +} + +.social-icon--vk:hover { + background: #0077FF; + color: white; +} + +.social-icon--youtube:hover { + background: #FF0000; + color: white; +} + +/* ========================================================================= + FOLLOW BUTTONS + ========================================================================= */ + +.follow-buttons { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.follow-btn { + display: inline-flex; + align-items: center; + gap: 12px; + padding: 16px 28px; + background: var(--color-white); + border: none; + border-radius: 16px; + font-family: inherit; + font-size: 15px; + font-weight: 600; + color: var(--color-dark); + cursor: pointer; + transition: all 0.2s ease; +} + +.follow-btn:hover { + transform: translateY(-3px); +} + +.follow-btn--telegram:hover { + background: #26A5E4; + color: white; + box-shadow: 0 12px 24px rgba(38, 165, 228, 0.25); +} + +.follow-btn--youtube:hover { + background: #FF0000; + color: white; + box-shadow: 0 12px 24px rgba(255, 0, 0, 0.25); +} + +.follow-btn--vk:hover { + background: #0077FF; + color: white; + box-shadow: 0 12px 24px rgba(0, 119, 255, 0.25); +} + +/* ========================================================================= + SOCIAL CARDS + ========================================================================= */ + +.social-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +.social-card { + display: flex; + align-items: center; + gap: 20px; + background: var(--color-white); + border-radius: 24px; + padding: 28px; + transition: all 0.2s ease; +} + +.social-card:hover { + transform: translateY(-4px); + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); +} + +.social-card__icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 18px; + flex-shrink: 0; +} + +.social-card--telegram .social-card__icon { + background: rgba(38, 165, 228, 0.12); + color: #26A5E4; +} + +.social-card--youtube .social-card__icon { + background: rgba(255, 0, 0, 0.1); + color: #FF0000; +} + +.social-card__content { + flex: 1; +} + +.social-card__title { + font-size: 18px; + font-weight: 700; + color: var(--color-dark); + margin: 0 0 4px 0; +} + +.social-card__desc { + font-size: 14px; + color: var(--color-slate-500); + margin: 0 0 8px 0; +} + +.social-card__stats { + font-size: 13px; + font-weight: 600; + color: var(--color-slate-400); +} + +.social-card__btn { + padding: 12px 20px; + background: var(--color-primary); + border: none; + border-radius: 12px; + font-family: inherit; + font-size: 13px; + font-weight: 700; + color: white; + cursor: pointer; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.social-card__btn:hover { + background: #2563eb; + transform: translateY(-2px); +} + +/* ========================================================================= + SOCIAL POST + ========================================================================= */ + +.social-post { + background: var(--color-white); + border-radius: 24px; + padding: 24px; + max-width: 560px; +} + +.social-post__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.social-post__author { + display: flex; + align-items: center; + gap: 14px; +} + +.social-post__avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} + +.social-post__info { + display: flex; + flex-direction: column; +} + +.social-post__name { + font-size: 15px; + font-weight: 700; + color: var(--color-dark); +} + +.social-post__meta { + font-size: 13px; + color: var(--color-slate-400); +} + +.social-post__more { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + border-radius: 50%; + color: var(--color-slate-400); + cursor: pointer; + transition: background 0.2s ease; +} + +.social-post__more:hover { + background: var(--color-slate-100); +} + +.social-post__body p { + font-size: 15px; + color: var(--color-dark); + line-height: 1.6; + margin: 0 0 16px 0; +} + +.social-post__image { + width: 100%; + border-radius: 16px; + object-fit: cover; +} + +.social-post__actions { + display: flex; + gap: 8px; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--color-slate-100); +} + +.social-action { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 16px; + background: transparent; + border: none; + border-radius: 12px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-500); + cursor: pointer; + transition: all 0.2s ease; +} + +.social-action:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.social-action:last-child { + margin-left: auto; +} + +/* ========================================================================= + PROFILE WIDGET + ========================================================================= */ + +.profile-widget { + max-width: 360px; + background: var(--color-white); + border-radius: 28px; + overflow: hidden; +} + +.profile-widget__cover { + height: 120px; + background-size: cover; + background-position: center; +} + +.profile-widget__body { + padding: 0 28px 28px; + text-align: center; +} + +.profile-widget__avatar { + width: 88px; + height: 88px; + border-radius: 50%; + border: 4px solid var(--color-white); + margin-top: -44px; + object-fit: cover; +} + +.profile-widget__name { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 12px 0 4px 0; +} + +.profile-widget__username { + font-size: 14px; + color: var(--color-slate-400); +} + +.profile-widget__bio { + font-size: 14px; + color: var(--color-slate-600); + line-height: 1.6; + margin: 16px 0; +} + +.profile-widget__stats { + display: flex; + justify-content: center; + gap: 32px; + margin-bottom: 24px; +} + +.profile-widget__stat { + text-align: center; +} + +.profile-widget__stat-value { + display: block; + font-size: 18px; + font-weight: 700; + color: var(--color-dark); +} + +.profile-widget__stat-label { + font-size: 12px; + color: var(--color-slate-400); +} + +/* ========================================================================= + MESSENGER WIDGET + ========================================================================= */ + +.messenger-widgets { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +.messenger-widget { + background: var(--color-white); + border-radius: 24px; + padding: 24px; + border-left: 4px solid; +} + +.messenger-widget--telegram { + border-color: #26A5E4; +} + +.messenger-widget--whatsapp { + border-color: #25D366; +} + +.messenger-widget__header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.messenger-widget--telegram .messenger-widget__header { + color: #26A5E4; +} + +.messenger-widget--whatsapp .messenger-widget__header { + color: #25D366; +} + +.messenger-widget__header span { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +.messenger-widget__body { + margin-bottom: 20px; +} + +.messenger-widget__status { + font-size: 12px; + font-weight: 600; + color: var(--color-success); + margin-bottom: 8px; + display: block; +} + +.messenger-widget__text { + font-size: 14px; + color: var(--color-slate-600); + margin: 0; +} + +.messenger-widget__btn { + width: 100%; + padding: 14px; + border: none; + border-radius: 14px; + font-family: inherit; + font-size: 14px; + font-weight: 700; + color: white; + cursor: pointer; + transition: all 0.2s ease; +} + +.messenger-widget--telegram .messenger-widget__btn { + background: #26A5E4; +} + +.messenger-widget--telegram .messenger-widget__btn:hover { + background: #1e96d2; +} + +.messenger-widget--whatsapp .messenger-widget__btn { + background: #25D366; +} + +.messenger-widget--whatsapp .messenger-widget__btn:hover { + background: #20bd5a; +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 20px; + padding: 28px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.8; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 1024px) { + .demo-grid { + grid-template-columns: 1fr; + } + + .social-cards { + grid-template-columns: 1fr; + } + + .messenger-widgets { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .share-block { + flex-direction: column; + gap: 16px; + } + + .follow-buttons { + flex-direction: column; + } + + .social-card { + flex-direction: column; + text-align: center; + } +} diff --git a/skills/documatica-v12-design-system/references/social.html b/skills/documatica-v12-design-system/references/social.html new file mode 100644 index 00000000..7471b82e --- /dev/null +++ b/skills/documatica-v12-design-system/references/social.html @@ -0,0 +1,332 @@ + + + + + + Social Media — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ ● CONNECT +

SO
CIAL

+

Кнопки шаринга, социальные виджеты, профили и интеграции.

+
+ + +
+
+ 01 +

SHARE BUTTONS

+
+ + +
+ + +
+
+ 02 +

SOCIAL ICONS

+
+ +
+
+ Круглые + +
+
+ Квадратные + +
+
+ Минимализм + +
+
+
+ + +
+
+ 03 +

FOLLOW BUTTONS

+
+ + +
+ + +
+
+ 04 +

SOCIAL CARDS

+
+ + +
+ + +
+
+ 05 +

SOCIAL POST

+
+ + +
+ + +
+
+ 06 +

USER PROFILE WIDGET

+
+ +
+
+
+ +

Дмитрий Новиков

+ @dmitry_dev +

Full-stack разработчик. Создаю UI Kit и делюсь опытом. Open Source enthusiast.

+
+
+ 1.2K + Подписчики +
+
+ 348 + Подписки +
+
+ 89 + Посты +
+
+ +
+
+
+ + +
+
+ 07 +

MESSENGER WIDGET

+
+ +
+
+
+ + Telegram +
+
+ ● Онлайн +

Напишите нам — ответим за 5 минут!

+
+ +
+ +
+
+ + WhatsApp +
+
+ ● Онлайн +

Есть вопросы? Пишите!

+
+ +
+
+
+ + +
+
+ 08 +

ИСПОЛЬЗОВАНИЕ

+
+ +
+ 
<!-- Кнопки шаринга -->
+<div class="share-buttons">
+  <button class="share-btn share-btn--telegram">...</button>
+  <button class="share-btn share-btn--whatsapp">...</button>
+</div>
+
+<!-- Социальные иконки -->
+<div class="social-icons social-icons--circle">
+  <a class="social-icon social-icon--telegram">...</a>
+</div>
+
+/* Модификаторы */
+.social-icons--circle   /* Круглые */
+.social-icons--square   /* Квадратные */
+.social-icons--minimal  /* Без фона */
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/stats.css b/skills/documatica-v12-design-system/references/stats.css new file mode 100644 index 00000000..5c71a5d6 --- /dev/null +++ b/skills/documatica-v12-design-system/references/stats.css @@ -0,0 +1,556 @@ +/** + * Documatica Design System v12.0 + * Stats & Counters Components + */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + STATS GRID + ========================================================================= */ + +.stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-4); +} + +.stats-grid--3 { + grid-template-columns: repeat(3, 1fr); +} + +.stats-grid--2 { + grid-template-columns: repeat(2, 1fr); +} + +/* ========================================================================= + STAT CARD BASE + ========================================================================= */ + +.stat-card { + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.stat-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); +} + +.stat-label { + display: block; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + margin-bottom: var(--spacing-2); +} + +.stat-value { + display: block; + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); + line-height: 1.2; +} + +/* ========================================================================= + STAT WITH ICON + ========================================================================= */ + +.stat-card--icon { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.stat-icon { + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-xl); + flex-shrink: 0; +} + +.stat-icon svg { + width: 26px; + height: 26px; +} + +.stat-icon--primary { + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); +} + +.stat-icon--success { + background: rgba(16, 185, 129, 0.1); + color: var(--color-success); +} + +.stat-icon--smart { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.stat-content { + display: flex; + flex-direction: column; +} + +.stat-content .stat-value { + order: 1; +} + +.stat-content .stat-label { + order: 2; + margin-bottom: 0; + margin-top: var(--spacing-1); +} + +/* ========================================================================= + STAT WITH CHANGE + ========================================================================= */ + +.stat-card--change { + display: flex; + flex-direction: column; +} + +.stat-change { + display: inline-flex; + align-items: center; + gap: var(--spacing-1); + margin-top: var(--spacing-2); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); +} + +.stat-change svg { + width: 14px; + height: 14px; +} + +.stat-change--up { + color: var(--color-success); +} + +.stat-change--down { + color: var(--color-danger); +} + +.stat-change--neutral { + color: var(--color-slate-400); +} + +/* ========================================================================= + STAT WITH PROGRESS + ========================================================================= */ + +.stat-card--progress .stat-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-3); +} + +.stat-card--progress .stat-label { + margin: 0; +} + +.stat-percent { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.stat-bar { + height: 8px; + background: var(--color-slate-200); + border-radius: var(--radius-full); + overflow: hidden; + margin-bottom: var(--spacing-2); +} + +.stat-bar__fill { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + transition: width 0.5s ease; +} + +.stat-bar--success .stat-bar__fill { + background: var(--color-success); +} + +.stat-detail { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + HERO STAT + ========================================================================= */ + +.stat-hero { + padding: var(--spacing-10); + background: linear-gradient(135deg, var(--color-primary), #2563eb); + border-radius: var(--radius-2xl); + color: var(--color-white); + text-align: center; +} + +.stat-hero__badge { + display: inline-block; + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + background: rgba(255, 255, 255, 0.2); + border-radius: var(--radius-full); + margin-bottom: var(--spacing-4); +} + +.stat-hero__value { + display: flex; + align-items: baseline; + justify-content: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-2); +} + +.stat-hero__number { + font-size: 72px; + font-weight: var(--font-weight-black); + line-height: 1; +} + +.stat-hero__unit { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + opacity: 0.8; +} + +.stat-hero__description { + margin: 0; + font-size: var(--font-size-lg); + opacity: 0.8; +} + +.stat-hero__footer { + margin-top: var(--spacing-6); + padding-top: var(--spacing-6); + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.stat-hero__footer .stat-change { + justify-content: center; + color: rgba(255, 255, 255, 0.9); +} + +/* ========================================================================= + INLINE STATS + ========================================================================= */ + +.stats-inline { + display: flex; + justify-content: center; + align-items: center; + gap: var(--spacing-8); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.stat-inline { + text-align: center; +} + +.stat-inline__value { + display: block; + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-dark); +} + +.stat-inline__label { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.stat-inline__divider { + width: 1px; + height: 40px; + background: var(--color-slate-200); +} + +/* ========================================================================= + COMPARISON STATS + ========================================================================= */ + +.stats-comparison { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-6); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.stat-compare { + text-align: center; +} + +.stat-compare__header { + display: flex; + flex-direction: column; + margin-bottom: var(--spacing-2); +} + +.stat-compare__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); +} + +.stat-compare__period { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +.stat-compare__value { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); +} + +.stat-compare__value--current { + color: var(--color-primary); +} + +.stat-compare__value--previous { + color: var(--color-slate-500); +} + +.stat-compare__arrow { + color: var(--color-slate-300); +} + +.stat-compare__arrow svg { + width: 24px; + height: 24px; +} + +.stat-compare__diff { + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + border-radius: var(--radius-lg); +} + +.stat-compare__diff--up { + color: var(--color-success); + background: rgba(16, 185, 129, 0.1); +} + +.stat-compare__diff--down { + color: var(--color-danger); + background: rgba(220, 38, 38, 0.1); +} + +/* ========================================================================= + DARK STATS + ========================================================================= */ + +.stats-dark { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); + padding: var(--spacing-6); + background: var(--color-dark); + border-radius: var(--radius-2xl); +} + +.stat-dark { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--spacing-4); +} + +.stat-dark__icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(251, 191, 36, 0.15); + border-radius: var(--radius-xl); + color: var(--color-smart); + margin-bottom: var(--spacing-4); +} + +.stat-dark__icon svg { + width: 24px; + height: 24px; +} + +.stat-dark__value { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-black); + color: var(--color-white); + margin-bottom: var(--spacing-1); +} + +.stat-dark__label { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } + + .stats-grid--3 { + grid-template-columns: 1fr; + } + + .stat-hero__number { + font-size: 48px; + } + + .stats-inline { + flex-wrap: wrap; + gap: var(--spacing-4); + } + + .stat-inline__divider { + display: none; + } + + .stat-inline { + flex: 0 0 calc(50% - 8px); + } + + .stats-comparison { + flex-direction: column; + } + + .stat-compare__arrow { + transform: rotate(90deg); + } + + .stats-dark { + grid-template-columns: 1fr; + } +} diff --git a/skills/documatica-v12-design-system/references/stats.html b/skills/documatica-v12-design-system/references/stats.html new file mode 100644 index 00000000..08e26f6a --- /dev/null +++ b/skills/documatica-v12-design-system/references/stats.html @@ -0,0 +1,284 @@ + + + + + + Stats — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Stats Protocol v12.0 +
+

+ Stats +

+
+ + +
+

01. Basic Stats Grid

+
+
+ Всего документов + 12,847 +
+
+ Активных пользователей + 1,253 +
+
+ Обработано сегодня + 847 +
+
+ Точность AI + 98.7% +
+
+
+ + +
+

02. With Icons

+
+
+
+ + + +
+
+ 8,456 + Документов +
+
+
+
+ + + +
+
+ 2,347 + Пользователей +
+
+
+
+ + + +
+
+ 156K + AI запросов +
+
+
+
+ + +
+

03. With Change Indicator

+
+
+ Выручка + $124,500 +
+ + + + +12.5% +
+
+
+ Конверсия + 3.24% +
+ + + + +0.8% +
+
+
+ Отток + 2.1% +
+ + + + -0.3% +
+
+
+ Время ответа + 1.2s +
+ + + + 0% +
+
+
+
+ + +
+

04. With Progress

+
+
+
+ Использование хранилища + 72% +
+
+
+
+ 36 GB из 50 GB +
+
+
+ API лимит + 45% +
+
+
+
+ 4,500 из 10,000 запросов +
+
+
+ + +
+

05. Hero Stat

+
+
На этой неделе
+
+ 2,847 + документов +
+

обработано с помощью AI

+
+
+ + + + +23% к прошлой неделе +
+
+
+
+ + +
+

06. Inline Stats

+
+
+ 1.2M + Загрузок +
+
+
+ 4.9 + Рейтинг +
+
+
+ 50+ + Стран +
+
+
+ 24/7 + Поддержка +
+
+
+ + +
+

07. Comparison Stats

+
+
+
+ Этот месяц + Янв 2024 +
+ $48,200 +
+
+ + + +
+
+
+ Прошлый месяц + Дек 2023 +
+ $42,100 +
+
+14.5%
+
+
+ + +
+

08. Dark AI Stats

+
+
+
+ + + +
+ 98.7% + AI Точность +
+
+
+ + + +
+ 0.3s + Время ответа +
+
+
+ + + +
+ 256-bit + Шифрование +
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/tables.css b/skills/documatica-v12-design-system/references/tables.css new file mode 100644 index 00000000..eb1228f4 --- /dev/null +++ b/skills/documatica-v12-design-system/references/tables.css @@ -0,0 +1,576 @@ +/** + * Documatica Design System v12.0 + * Table Components + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 1100px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + BADGE (inline for tables) + ========================================================================= */ + +.badge { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + border-radius: var(--radius-md); + white-space: nowrap; +} + +.badge--sm { + padding: 2px var(--spacing-2); + font-size: 10px; +} + +.badge--success { + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); +} + +.badge--warning { + background: rgba(251, 191, 36, 0.15); + color: #b45309; +} + +.badge--danger { + background: rgba(220, 38, 38, 0.15); + color: var(--color-danger); +} + +.badge--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.badge--neutral { + background: var(--color-slate-100); + color: var(--color-slate-600); +} + +.badge--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.badge--pill { + border-radius: var(--radius-full); + padding: var(--spacing-1) var(--spacing-3); +} + +/* ========================================================================= + TABLE WRAPPER + ========================================================================= */ + +.table-wrapper { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); + overflow: hidden; +} + +/* ========================================================================= + TABLE BASE + ========================================================================= */ + +.table { + width: 100%; + border-collapse: collapse; + font-size: var(--font-size-base); +} + +.table thead { + background: var(--color-slate-50); +} + +.table th { + padding: var(--spacing-4) var(--spacing-5); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-slate-500); + text-align: left; + border-bottom: 1px solid var(--color-slate-200); +} + +.table td { + padding: var(--spacing-4) var(--spacing-5); + color: var(--color-dark); + border-bottom: 1px solid var(--color-slate-100); + vertical-align: middle; +} + +.table tbody tr:last-child td { + border-bottom: none; +} + +.table tbody tr:hover { + background: var(--color-slate-50); +} + +/* ========================================================================= + TABLE VARIANTS + ========================================================================= */ + +.table--striped tbody tr:nth-child(even) { + background: var(--color-slate-50); +} + +.table--striped tbody tr:hover { + background: rgba(59, 130, 246, 0.05); +} + +.table--compact th, +.table--compact td { + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-sm); +} + +/* ========================================================================= + TABLE CELL STYLES + ========================================================================= */ + +.table__mono { + font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-600); +} + +.table__muted { + color: var(--color-slate-400); +} + +.table__success { + color: var(--color-success); + font-weight: var(--font-weight-bold); +} + +.table__danger { + color: var(--color-danger); + font-weight: var(--font-weight-bold); +} + +/* ========================================================================= + SORTABLE HEADERS + ========================================================================= */ + +.table__sortable { + cursor: pointer; + user-select: none; + transition: var(--transition-base); +} + +.table__sortable:hover { + color: var(--color-primary); +} + +.table__sortable svg { + width: 14px; + height: 14px; + display: inline-block; + vertical-align: middle; + margin-left: var(--spacing-2); + opacity: 0.5; +} + +.table__sortable--active { + color: var(--color-primary); +} + +.table__sortable--active svg { + opacity: 1; +} + +/* ========================================================================= + TABLE FILE + ========================================================================= */ + +.table-file { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.table-file__icon { + width: 20px; + height: 20px; + color: var(--color-slate-400); + flex-shrink: 0; +} + +/* ========================================================================= + TABLE ACTIONS + ========================================================================= */ + +.table-actions { + display: flex; + gap: var(--spacing-2); + justify-content: flex-end; +} + +.table-action { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: transparent; + border: none; + border-radius: var(--radius-lg); + color: var(--color-slate-400); + cursor: pointer; + transition: var(--transition-base); +} + +.table-action svg { + width: 18px; + height: 18px; +} + +.table-action:hover { + background: var(--color-slate-100); + color: var(--color-primary); +} + +.table-action--danger:hover { + background: rgba(220, 38, 38, 0.1); + color: var(--color-danger); +} + +/* ========================================================================= + TABLE CHECKBOX + ========================================================================= */ + +.table-check { + display: flex; + align-items: center; + cursor: pointer; +} + +.table-check input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.table-check__box { + position: relative; + width: 20px; + height: 20px; + background: var(--color-white); + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-md); + transition: var(--transition-base); +} + +.table-check input:checked ~ .table-check__box { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.table-check__box::after { + content: ''; + position: absolute; + top: 2px; + left: 6px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg) scale(0); + transition: var(--transition-base); +} + +.table-check input:checked ~ .table-check__box::after { + transform: rotate(45deg) scale(1); +} + +/* ========================================================================= + TABLE USER + ========================================================================= */ + +.table-user { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.table-user__avatar { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-200); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-dark); + flex-shrink: 0; +} + +.table-user__avatar--blue { + background: rgba(59, 130, 246, 0.2); + color: var(--color-primary); +} + +.table-user__avatar--green { + background: rgba(16, 185, 129, 0.2); + color: var(--color-success); +} + +.table-user__info { + display: flex; + flex-direction: column; +} + +.table-user__name { + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.table-user__role { + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +/* ========================================================================= + TABLE HEADER/FOOTER + ========================================================================= */ + +.table-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-4) var(--spacing-5); + border-bottom: 1px solid var(--color-slate-200); +} + +.table-header__count { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.table-select { + padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + cursor: pointer; +} + +.table-footer { + padding: var(--spacing-4) var(--spacing-5); + border-top: 1px solid var(--color-slate-200); + display: flex; + justify-content: center; +} + +/* ========================================================================= + PAGINATION + ========================================================================= */ + +.pagination { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.pagination__btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + color: var(--color-slate-500); + cursor: pointer; + transition: var(--transition-base); +} + +.pagination__btn svg { + width: 18px; + height: 18px; +} + +.pagination__btn:hover:not(:disabled) { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination__btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.pagination__page { + display: flex; + align-items: center; + justify-content: center; + min-width: 36px; + height: 36px; + padding: 0 var(--spacing-3); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-lg); + font-family: var(--font-family); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); + cursor: pointer; + transition: var(--transition-base); +} + +.pagination__page:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.pagination__page--active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.pagination__dots { + padding: 0 var(--spacing-2); + color: var(--color-slate-400); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .table-wrapper { + overflow-x: auto; + } + + .table { + min-width: 600px; + } + + .table th, + .table td { + padding: var(--spacing-3) var(--spacing-4); + } +} diff --git a/skills/documatica-v12-design-system/references/tables.html b/skills/documatica-v12-design-system/references/tables.html new file mode 100644 index 00000000..f96fdfcd --- /dev/null +++ b/skills/documatica-v12-design-system/references/tables.html @@ -0,0 +1,455 @@ + + + + + + Tables — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Data Protocol v12.0 +
+

+ Таблицы +

+
+ + +
+

01. Basic Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ДокументТипДатаСуммаСтатус
Договор_ООО_ТехПром.pdfКонтракт15.06.2026125,000 ₽Готов
Счёт-фактура_№1284.pdfСчёт14.06.202645,500 ₽На проверке
Акт_выполненных_работ.pdfАкт12.06.202689,000 ₽Готов
Накладная_№456.pdfНакладная10.06.202615,200 ₽Отклонён
+
+
+ + +
+

02. Striped Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИННОрганизацияРегионСтатус
7707083893ПАО СбербанкМоскваАктивен
7710140679ПАО ВТБМоскваАктивен
7728168971ПАО ГазпромСанкт-ПетербургАктивен
7736050003ПАО РоснефтьМоскваПроверка
+
+
+ + +
+

03. With Actions

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + НазваниеРазмерИзменён
+ + +
+ + + + Договор_поставки_2026.pdf +
+ 		2.4 MB2 часа назад +
+ + + +
+
+ + +
+ + + + Счёт-фактура_№1285.pdf +
+ 		856 KBВчера +
+ + + +
+
+
+
+ + +
+

04. Sortable Headers

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Дата + + + + + Контрагент + + + + + Сумма + + + + Статус
18.06.2026ООО «ТехПром»250,000 ₽Оплачен
17.06.2026АО «ИнвестГрупп»89,500 ₽Ожидает
15.06.2026ИП Иванов А.С.45,000 ₽Оплачен
+
+
+ + +
+

05. Compact Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDОперацияВремяРезультат
#1284AI Анализ документа0.34sOK
#1283Валидация ИНН0.12sOK
#1282Синхронизация API1.45sFail
#1281Экспорт в PDF2.18sOK
+
+
+ + +
+

06. With Avatar

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ПользовательРольEmailПоследний вход
+
+
АИ
+
+ Алексей Иванов + Администратор +
+
+ 		Admina.ivanov@company.ruСейчас
+
+
МС
+
+ Мария Смирнова + Бухгалтер +
+
+ 		Userm.smirnova@company.ru2 часа назад
+
+
ДП
+
+ Дмитрий Петров + Юрист +
+
+ 		Prod.petrov@company.ruВчера
+
+
+ + +
+

07. With Pagination

+
+
+ Показано 1-10 из 156 +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#ТранзакцияСуммаДата
001Входящий платёж+125,000 ₽18.06.2026
002Исходящий платёж-45,000 ₽17.06.2026
003Входящий платёж+89,500 ₽15.06.2026
+
+ +
+
+
+ + + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/tabs.css b/skills/documatica-v12-design-system/references/tabs.css new file mode 100644 index 00000000..979ec210 --- /dev/null +++ b/skills/documatica-v12-design-system/references/tabs.css @@ -0,0 +1,602 @@ +/** + * UI Kit v12.0 — Tabs + * Tab navigation components + */ + +/* ========================================================================= + BASE LAYOUT + ========================================================================= */ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--color-dark); + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1000px; + margin: 0 auto; + padding: 48px 24px; +} + +/* ========================================================================= + NAVIGATION + ========================================================================= */ + +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 48px; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link svg { + transition: transform 0.2s ease; +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +/* ========================================================================= + HERO + ========================================================================= */ + +.hero { + margin-bottom: 64px; +} + +.hero__badge { + display: inline-block; + padding: 6px 16px; + background: rgba(59, 130, 246, 0.1); + color: var(--color-primary); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + border-radius: 100px; + margin-bottom: 24px; +} + +.hero__title { + font-size: clamp(48px, 8vw, 72px); + font-weight: 900; + color: var(--color-dark); + line-height: 1.0; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: -0.02em; +} + +.hero__title span { + color: var(--color-primary); +} + +.hero__desc { + font-size: 18px; + color: var(--color-slate-500); + max-width: 600px; + margin: 0; +} + +/* ========================================================================= + SECTIONS + ========================================================================= */ + +.section { + margin-bottom: 64px; +} + +.section__header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--color-slate-200); +} + +.section__number { + font-size: 14px; + font-weight: 700; + color: var(--color-primary); +} + +.section__title { + font-size: 20px; + font-weight: 700; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + DEMO + ========================================================================= */ + +.demo-stack { + display: flex; + flex-direction: column; + gap: 32px; +} + +.demo-item { + display: flex; + flex-direction: column; + gap: 12px; +} + +.demo-label { + font-size: 13px; + font-weight: 600; + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0; +} + +.demo-row { + display: flex; + flex-wrap: wrap; + gap: 24px; +} + +.dark-box { + background: var(--color-dark); + border-radius: 16px; + padding: 32px; +} + +/* ========================================================================= + TABS BASE + ========================================================================= */ + +.tabs { + width: 100%; +} + +.tabs__list { + display: flex; + gap: 4px; +} + +.tabs__tab { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: transparent; + border: none; + border-radius: 12px; + color: var(--color-slate-500); + font-family: inherit; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.tabs__tab:hover { + color: var(--color-dark); + background: var(--color-slate-100); +} + +.tabs__tab--active { + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); +} + +.tabs__tab--active:hover { + background: rgba(59, 130, 246, 0.15); +} + +.tabs__tab--disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.tabs__tab--disabled:hover { + color: var(--color-slate-500); + background: transparent; +} + +.tabs__panel { + padding: 24px 0; + color: var(--color-slate-600); +} + +.tabs__panel p { + margin: 0; +} + +/* ========================================================================= + UNDERLINE TABS + ========================================================================= */ + +.tabs--underline .tabs__list { + gap: 0; + border-bottom: 1px solid var(--color-slate-200); +} + +.tabs--underline .tabs__tab { + border-radius: 0; + padding: 12px 20px; + margin-bottom: -1px; + border-bottom: 2px solid transparent; + background: transparent; +} + +.tabs--underline .tabs__tab:hover { + background: transparent; + border-bottom-color: var(--color-slate-300); +} + +.tabs--underline .tabs__tab--active { + background: transparent; + border-bottom-color: var(--color-primary); +} + +/* ========================================================================= + PILLS TABS + ========================================================================= */ + +.tabs--pills .tabs__list { + gap: 8px; + background: var(--color-slate-100); + padding: 4px; + border-radius: 12px; + width: fit-content; +} + +.tabs--pills .tabs__tab { + padding: 8px 16px; + border-radius: 8px; +} + +.tabs--pills .tabs__tab:hover { + background: var(--color-white); +} + +.tabs--pills .tabs__tab--active { + background: var(--color-white); + color: var(--color-dark); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* ========================================================================= + BOXED TABS + ========================================================================= */ + +.tabs--boxed { + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + overflow: hidden; +} + +.tabs--boxed .tabs__list { + gap: 0; + border-bottom: 1px solid var(--color-slate-200); + background: var(--color-slate-50); +} + +.tabs--boxed .tabs__tab { + border-radius: 0; + flex: 1; + justify-content: center; + border-right: 1px solid var(--color-slate-200); +} + +.tabs--boxed .tabs__tab:last-child { + border-right: none; +} + +.tabs--boxed .tabs__tab:hover { + background: var(--color-white); +} + +.tabs--boxed .tabs__tab--active { + background: var(--color-white); +} + +.tabs--boxed .tabs__panel { + padding: 24px; +} + +/* ========================================================================= + ICON ONLY TABS + ========================================================================= */ + +.tabs--icons .tabs__list { + gap: 4px; +} + +.tabs--icons .tabs__tab { + padding: 12px; +} + +/* ========================================================================= + WITH BADGE + ========================================================================= */ + +.tabs__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 20px; + height: 20px; + padding: 0 6px; + background: var(--color-slate-200); + border-radius: 10px; + font-size: 11px; + font-weight: 600; + color: var(--color-slate-600); +} + +.tabs__badge--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.tabs__badge--warning { + background: var(--color-smart); + color: var(--color-dark); +} + +/* ========================================================================= + SIZE VARIANTS + ========================================================================= */ + +.tabs--sm .tabs__tab { + padding: 8px 14px; + font-size: 13px; +} + +.tabs--lg .tabs__tab { + padding: 16px 24px; + font-size: 16px; +} + +/* ========================================================================= + FULL WIDTH + ========================================================================= */ + +.tabs--full .tabs__list { + width: 100%; +} + +.tabs--full .tabs__tab { + flex: 1; + justify-content: center; +} + +/* ========================================================================= + VERTICAL TABS + ========================================================================= */ + +.tabs--vertical { + display: flex; + gap: 32px; +} + +.tabs--vertical .tabs__list { + flex-direction: column; + width: 220px; + flex-shrink: 0; + gap: 4px; +} + +.tabs--vertical .tabs__tab { + justify-content: flex-start; + border-radius: 12px; +} + +.tabs__panel--vertical { + flex: 1; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: 16px; + padding: 24px; +} + +.tabs__panel--vertical h3 { + margin: 0 0 8px 0; + font-size: 18px; + font-weight: 700; + color: var(--color-dark); +} + +.tabs__panel--vertical p { + margin: 0; + color: var(--color-slate-500); +} + +/* ========================================================================= + CARD STYLE TABS + ========================================================================= */ + +.tabs--cards .tabs__list { + gap: 12px; +} + +.tabs--cards .tabs__tab { + flex-direction: column; + align-items: flex-start; + gap: 4px; + padding: 16px 24px; + background: var(--color-white); + border: 2px solid var(--color-slate-200); + border-radius: 16px; + min-width: 140px; +} + +.tabs--cards .tabs__tab:hover { + border-color: var(--color-slate-300); +} + +.tabs--cards .tabs__tab--active { + border-color: var(--color-primary); + background: rgba(59, 130, 246, 0.05); +} + +.tabs__tab-title { + font-size: 16px; + font-weight: 700; + color: var(--color-dark); +} + +.tabs__tab-desc { + font-size: 13px; + color: var(--color-slate-500); +} + +/* ========================================================================= + SEGMENTED CONTROL + ========================================================================= */ + +.segmented { + display: inline-flex; + background: var(--color-slate-100); + padding: 4px; + border-radius: 12px; + gap: 4px; +} + +.segmented__btn { + padding: 10px 20px; + background: transparent; + border: none; + border-radius: 8px; + color: var(--color-slate-600); + font-family: inherit; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.segmented__btn:hover { + color: var(--color-dark); +} + +.segmented__btn--active { + background: var(--color-white); + color: var(--color-dark); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* ========================================================================= + DARK THEME + ========================================================================= */ + +.tabs--dark .tabs__tab { + color: var(--color-slate-400); +} + +.tabs--dark .tabs__tab:hover { + color: var(--color-white); + background: rgba(255, 255, 255, 0.1); +} + +.tabs--dark .tabs__tab--active { + color: var(--color-white); +} + +.tabs--dark.tabs--underline .tabs__list { + border-bottom-color: rgba(255, 255, 255, 0.1); +} + +.tabs--dark.tabs--underline .tabs__tab { + background: transparent; +} + +.tabs--dark.tabs--underline .tabs__tab:hover { + background: transparent; + border-bottom-color: rgba(255, 255, 255, 0.3); +} + +.tabs--dark.tabs--underline .tabs__tab--active { + background: transparent; + border-bottom-color: var(--color-primary); +} + +.tabs--dark.tabs--pills .tabs__list { + background: rgba(255, 255, 255, 0.1); +} + +.tabs--dark.tabs--pills .tabs__tab:hover { + background: rgba(255, 255, 255, 0.1); +} + +.tabs--dark.tabs--pills .tabs__tab--active { + background: var(--color-primary); + color: var(--color-white); +} + +/* ========================================================================= + CODE BLOCK + ========================================================================= */ + +.code-block { + background: var(--color-dark); + border-radius: 16px; + padding: 24px; + overflow-x: auto; +} + +.code-block pre { + margin: 0; +} + +.code-block code { + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-size: 13px; + color: var(--color-slate-300); + line-height: 1.7; +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: 32px 16px; + } + + .tabs--vertical { + flex-direction: column; + } + + .tabs--vertical .tabs__list { + width: 100%; + flex-direction: row; + overflow-x: auto; + } + + .tabs--cards .tabs__list { + flex-direction: column; + } + + .tabs--cards .tabs__tab { + width: 100%; + } + + .demo-row { + flex-direction: column; + } +} diff --git a/skills/documatica-v12-design-system/references/tabs.html b/skills/documatica-v12-design-system/references/tabs.html new file mode 100644 index 00000000..a15b3667 --- /dev/null +++ b/skills/documatica-v12-design-system/references/tabs.html @@ -0,0 +1,480 @@ + + + + + + Tabs — UI Kit v12.0 + + + + + + +
+ + + + + + Назад + + +
+ NAVIGATION +

Tab Components

+

Вкладки для организации контента. Горизонтальные, вертикальные, с иконками и индикаторами.

+
+ + +
+
+ 01 +

Basic Tabs

+
+ +
+
+ + + + +
+
+

Содержимое вкладки "Обзор". Здесь может быть любой контент.

+
+
+
+ + +
+
+ 02 +

Underline Tabs

+
+ +
+
+ + + + +
+
+

Содержимое с подчёркиванием активной вкладки.

+
+
+
+ + +
+
+ 03 +

Pills Tabs

+
+ +
+
+ + + + +
+
+

Таблетки — компактный вариант для переключателей.

+
+
+
+ + +
+
+ 04 +

Boxed Tabs

+
+ +
+
+ + + +
+
+

Вкладки в общем контейнере — для карточек товаров.

+
+
+
+ + +
+
+ 05 +

With Icons

+
+ +
+
+ + + +
+
+

Вкладки с иконками слева от текста.

+
+
+
+ + +
+
+ 06 +

Icon Only

+
+ +
+
+ + + +
+
+
+ + +
+
+ 07 +

With Badge / Counter

+
+ +
+
+ + + + +
+
+

Вкладки с числовыми индикаторами.

+
+
+
+ + +
+
+ 08 +

Size Variants

+
+ +
+
+

Small

+
+
+ + + +
+
+
+ +
+

Medium (default)

+
+
+ + + +
+
+
+ +
+

Large

+
+
+ + + +
+
+
+
+
+ + +
+
+ 09 +

Full Width / Justified

+
+ +
+
+ + + + +
+
+

Вкладки занимают всю ширину контейнера.

+
+
+
+ + +
+
+ 10 +

Vertical Tabs

+
+ +
+
+ + + + +
+
+

Настройки профиля

+

Управление личными данными, аватаром и публичной информацией.

+
+
+
+ + +
+
+ 11 +

Card Style Tabs

+
+ +
+
+ + + +
+
+

Карточные вкладки — для выбора тарифов и опций.

+
+
+
+ + +
+
+ 12 +

Segmented Control

+
+ +
+
+ + +
+ +
+ + + +
+
+
+ + +
+
+ 13 +

Dark Theme

+
+ +
+
+
+ + + + +
+
+ +
+
+ + + + + +
+
+
+
+ + +
+
+ 14 +

Disabled State

+
+ +
+
+ + + + +
+
+
+ + +
+
+ 15 +

Использование

+
+ +
+ 
<div class="tabs tabs--underline">
+  <div class="tabs__list" role="tablist">
+    <button class="tabs__tab tabs__tab--active">Tab 1</button>
+    <button class="tabs__tab">Tab 2</button>
+    <button class="tabs__tab">Tab 3</button>
+  </div>
+  <div class="tabs__panel">Content</div>
+</div>
+
+/* Варианты стилей */
+.tabs--underline   /* Подчёркивание */
+.tabs--pills       /* Таблетки */
+.tabs--boxed       /* В контейнере */
+.tabs--cards       /* Карточки */
+.tabs--icons       /* Только иконки */
+.tabs--vertical    /* Вертикальные */
+.tabs--full        /* На всю ширину */
+
+/* Размеры */
+.tabs--sm          /* Маленькие */
+.tabs--lg          /* Большие */
+
+/* Тема */
+.tabs--dark        /* Тёмная тема */
+
+/* Segmented Control */
+<div class="segmented">
+  <button class="segmented__btn segmented__btn--active">On</button>
+  <button class="segmented__btn">Off</button>
+</div>
+
+
+ +
+ + + diff --git a/skills/documatica-v12-design-system/references/testimonials.css b/skills/documatica-v12-design-system/references/testimonials.css new file mode 100644 index 00000000..362216b2 --- /dev/null +++ b/skills/documatica-v12-design-system/references/testimonials.css @@ -0,0 +1,555 @@ +/** + * Documatica Design System v12.0 + * Testimonials Components + */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + TESTIMONIAL CARD + ========================================================================= */ + +.testimonial-card { + position: relative; + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.testimonial-card--sm { + padding: var(--spacing-6); +} + +.testimonial-card__quote { + margin-bottom: var(--spacing-4); +} + +.testimonial-card__quote svg { + width: 32px; + height: 32px; + color: var(--color-primary); + opacity: 0.3; +} + +.testimonial-card__quote--lg svg { + width: 48px; + height: 48px; +} + +.testimonial-card__quote--smart svg { + color: var(--color-smart); + opacity: 0.5; +} + +.testimonial-card__text { + margin: 0 0 var(--spacing-6); + font-size: var(--font-size-lg); + color: var(--color-slate-700); + line-height: var(--line-height-relaxed); +} + +.testimonial-card__text--sm { + font-size: var(--font-size-base); + margin-bottom: var(--spacing-4); +} + +.testimonial-card__author { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.testimonial-card__author--sm { + gap: var(--spacing-3); +} + +.author-avatar { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: var(--color-primary); + border-radius: var(--radius-full); +} + +.author-avatar--sm { + width: 36px; + height: 36px; + font-size: var(--font-size-sm); +} + +.author-avatar--lg { + width: 64px; + height: 64px; + font-size: var(--font-size-xl); +} + +.author-avatar--smart { + background: var(--color-smart); + color: var(--color-dark); +} + +.author-info { + display: flex; + flex-direction: column; +} + +.author-name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.author-name--lg { + font-size: var(--font-size-lg); +} + +.author-role { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.testimonial-rating { + color: var(--color-smart); + font-size: var(--font-size-lg); +} + +.testimonial-rating--sm { + font-size: var(--font-size-base); + margin-bottom: var(--spacing-3); +} + +.testimonial-card__footer { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +/* ========================================================================= + WITH PHOTO + ========================================================================= */ + +.testimonial-card--photo { + text-align: center; +} + +.testimonial-card__avatar { + display: flex; + justify-content: center; + margin-bottom: var(--spacing-6); +} + +.avatar--lg { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: linear-gradient(135deg, var(--color-primary), #6366f1); + border-radius: var(--radius-full); +} + +.testimonial-card--photo .testimonial-card__footer { + justify-content: center; + flex-direction: column; + align-items: center; + gap: var(--spacing-3); +} + +.testimonial-card--photo .author-info { + align-items: center; +} + +/* ========================================================================= + TESTIMONIAL GRID + ========================================================================= */ + +.testimonial-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-6); +} + +.testimonial-grid--2 { + grid-template-columns: repeat(2, 1fr); +} + +/* ========================================================================= + FEATURED TESTIMONIAL + ========================================================================= */ + +.testimonial-featured { + display: grid; + grid-template-columns: 2fr 1fr; + gap: var(--spacing-8); + padding: var(--spacing-10); + background: linear-gradient(135deg, #dbeafe 0%, #fef3c7 100%); + border-radius: var(--radius-2xl); +} + +.testimonial-featured__content { + display: flex; + flex-direction: column; +} + +.testimonial-featured__text { + flex: 1; + margin: var(--spacing-4) 0 var(--spacing-8); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-dark); + line-height: var(--line-height-relaxed); +} + +.testimonial-featured__author { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.testimonial-featured__stats { + display: flex; + flex-direction: column; + justify-content: center; + gap: var(--spacing-6); +} + +.featured-stat { + display: flex; + flex-direction: column; + padding: var(--spacing-6); + background: var(--color-white); + border-radius: var(--radius-xl); +} + +.featured-stat__value { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-black); + color: var(--color-primary); +} + +.featured-stat__label { + font-size: var(--font-size-sm); + color: var(--color-slate-600); +} + +/* ========================================================================= + WITH LOGO + ========================================================================= */ + +.testimonial-card__logo { + margin-bottom: var(--spacing-6); +} + +.company-logo { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-slate-600); +} + +/* ========================================================================= + DARK TESTIMONIAL + ========================================================================= */ + +.testimonial-card--dark { + background: var(--color-dark); + border-color: var(--color-slate-700); +} + +.testimonial-card--dark .testimonial-card__text { + color: var(--color-slate-300); +} + +.testimonial-card--dark .author-name { + color: var(--color-white); +} + +.testimonial-card--dark .author-role { + color: var(--color-slate-500); +} + +/* ========================================================================= + CAROUSEL + ========================================================================= */ + +.testimonial-carousel { + padding: var(--spacing-8); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.carousel-track { + display: flex; + gap: var(--spacing-6); + margin-bottom: var(--spacing-6); +} + +.testimonial-slide { + flex: 1; + padding: var(--spacing-6); + text-align: center; + opacity: 0.3; + transition: var(--transition-base); +} + +.testimonial-slide--active { + opacity: 1; + background: var(--color-slate-50); + border-radius: var(--radius-xl); +} + +.testimonial-slide p { + margin: 0 0 var(--spacing-3); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.testimonial-slide span { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.carousel-dots { + display: flex; + justify-content: center; + gap: var(--spacing-2); +} + +.carousel-dot { + width: 8px; + height: 8px; + background: var(--color-slate-300); + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-base); +} + +.carousel-dot--active { + width: 24px; + background: var(--color-primary); +} + +/* ========================================================================= + VIDEO TESTIMONIAL + ========================================================================= */ + +.testimonial-video { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-6); + padding: var(--spacing-6); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-2xl); +} + +.video-thumbnail { + position: relative; + aspect-ratio: 16/9; + background: var(--color-dark); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.video-placeholder-bg { + position: absolute; + inset: 0; + background: + linear-gradient(45deg, rgba(59, 130, 246, 0.1) 25%, transparent 25%), + linear-gradient(-45deg, rgba(59, 130, 246, 0.1) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, rgba(59, 130, 246, 0.1) 75%), + linear-gradient(-45deg, transparent 75%, rgba(59, 130, 246, 0.1) 75%); + background-size: 20px 20px; +} + +.video-play-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-white); + border: none; + border-radius: var(--radius-full); + cursor: pointer; + transition: var(--transition-spring); +} + +.video-play-btn svg { + width: 24px; + height: 24px; + color: var(--color-primary); + margin-left: 4px; +} + +.video-play-btn:hover { + transform: translate(-50%, -50%) scale(1.1); +} + +.video-duration { + position: absolute; + bottom: var(--spacing-3); + right: var(--spacing-3); + padding: var(--spacing-1) var(--spacing-3); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-white); + background: rgba(0, 0, 0, 0.7); + border-radius: var(--radius-md); +} + +.video-info { + display: flex; + flex-direction: column; + justify-content: center; +} + +.video-info h4 { + margin: 0 0 var(--spacing-4); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + color: var(--color-dark); + line-height: var(--line-height-snug); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .testimonial-grid { + grid-template-columns: 1fr; + } + + .testimonial-grid--2 { + grid-template-columns: 1fr; + } + + .testimonial-featured { + grid-template-columns: 1fr; + } + + .testimonial-video { + grid-template-columns: 1fr; + } + + .carousel-track { + flex-direction: column; + } + + .testimonial-slide { + opacity: 1; + } +} diff --git a/skills/documatica-v12-design-system/references/testimonials.html b/skills/documatica-v12-design-system/references/testimonials.html new file mode 100644 index 00000000..a058465f --- /dev/null +++ b/skills/documatica-v12-design-system/references/testimonials.html @@ -0,0 +1,263 @@ + + + + + + Testimonials — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Testimonial Protocol v12.0 +
+

+ Testimonials +

+
+ + +
+

01. Basic Testimonial Card

+
+
+ + + +
+

+ Documatica полностью изменила наш подход к документообороту. Теперь поиск документов занимает секунды, а не часы. +

+
+
АК
+
+ Анна Козлова + CEO, TechStart +
+
+
+
+ + +
+

02. With Photo

+
+
+
МП
+
+

+ AI анализ документов экономит нашей команде более 20 часов в неделю. Это невероятный инструмент для любой компании, работающей с большим объёмом документации. +

+
+
+ Михаил Петров + Head of Operations, FinGroup +
+
+ ★★★★★ +
+
+
+
+ + +
+

03. Testimonial Grid

+
+
+
★★★★★
+

+ Лучшая система для документооборота, которую я использовал. +

+
+
ДС
+ Дмитрий С. +
+
+
+
★★★★★
+

+ Интеграция прошла гладко, поддержка отличная! +

+
+
ЕВ
+ Елена В. +
+
+
+
★★★★☆
+

+ OCR работает просто отлично, даже со сканами. +

+
+
ИК
+ Игорь К. +
+
+
+
+ + +
+

04. Featured Testimonial

+
+
+
+ + + +
+

+ Внедрение Documatica стало одним из лучших решений для нашей компании. ROI окупился за первые 3 месяца использования. +

+
+
СН
+
+ Сергей Новиков + CTO, Enterprise Solutions +
+
+
+
+
+ 300% + Рост продуктивности +
+
+ 20ч + Экономия в неделю +
+
+
+
+ + +
+

05. With Company Logo

+
+
+ +

+ Переход на Documatica занял всего 2 недели. Миграция данных прошла без проблем. +

+
+
+ Ольга Иванова + IT Director +
+
+
+
+ +

+ Как стартап, мы искали масштабируемое решение. Documatica — именно то, что нужно. +

+
+
+ Павел Смирнов + Founder +
+
+
+
+
+ + +
+

06. Dark Testimonial

+
+
+ + + +
+

+ AI-функции Documatica превзошли все ожидания. Автоматическая классификация документов работает безупречно. +

+
+
ВМ
+
+ Виктор Морозов + Data Scientist, AI Labs +
+
+
+
+ + +
+

07. Carousel (Static Preview)

+
+
+
+

"Отличный продукт!"

+ — Клиент 1 +
+
+

"Рекомендую всем коллегам"

+ — Клиент 2 +
+
+

"Изменил наш workflow"

+ — Клиент 3 +
+
+
+ + + +
+
+
+ + +
+

08. Video Testimonial

+
+
+
+ +
2:45
+
+
+

История успеха: Как FinGroup сократили время обработки документов на 80%

+
+
МП
+
+ Михаил Петров + Head of Operations, FinGroup +
+
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/timeline.css b/skills/documatica-v12-design-system/references/timeline.css new file mode 100644 index 00000000..7d5db8eb --- /dev/null +++ b/skills/documatica-v12-design-system/references/timeline.css @@ -0,0 +1,539 @@ +/** + * Documatica Design System v12.0 + * Timeline Components + */ + +.container { + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + VERTICAL TIMELINE + ========================================================================= */ + +.timeline { + position: relative; + padding-left: 32px; +} + +.timeline::before { + content: ''; + position: absolute; + top: 8px; + left: 7px; + bottom: 8px; + width: 2px; + background: var(--color-slate-200); +} + +.timeline-item { + position: relative; + padding-bottom: var(--spacing-8); +} + +.timeline-item:last-child { + padding-bottom: 0; +} + +.timeline-marker { + position: absolute; + left: -32px; + top: 4px; + width: 16px; + height: 16px; + background: var(--color-primary); + border: 4px solid var(--color-white); + border-radius: var(--radius-full); + box-shadow: 0 0 0 2px var(--color-slate-200); + z-index: 1; +} + +.timeline-marker--lg { + width: 20px; + height: 20px; + left: -34px; +} + +.timeline-marker--icon { + width: 32px; + height: 32px; + left: -40px; + top: 0; + display: flex; + align-items: center; + justify-content: center; + border-width: 0; + box-shadow: var(--shadow-md); +} + +.timeline-marker--icon svg { + width: 16px; + height: 16px; + color: var(--color-white); +} + +.timeline-marker--primary { + background: var(--color-primary); +} + +.timeline-marker--success { + background: var(--color-success); +} + +.timeline-marker--danger { + background: var(--color-danger); +} + +.timeline-marker--smart { + background: var(--color-smart); +} + +.timeline-marker--smart svg { + color: var(--color-dark); +} + +.timeline-content { + padding-left: var(--spacing-4); +} + +.timeline-date { + display: block; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-slate-400); + margin-bottom: var(--spacing-1); +} + +.timeline-title { + margin: 0 0 var(--spacing-2); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.timeline-text { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +/* With Icons - adjust padding */ +.timeline:has(.timeline-marker--icon) { + padding-left: 48px; +} + +.timeline:has(.timeline-marker--icon)::before { + left: 15px; +} + +/* ========================================================================= + CENTERED TIMELINE + ========================================================================= */ + +.timeline--centered { + padding-left: 0; +} + +.timeline--centered::before { + left: 50%; + transform: translateX(-50%); +} + +.timeline--centered .timeline-item { + width: 50%; + padding-left: 0; + padding-right: var(--spacing-8); +} + +.timeline--centered .timeline-item--left { + margin-left: 0; + text-align: right; +} + +.timeline--centered .timeline-item--left .timeline-marker { + left: auto; + right: -10px; +} + +.timeline--centered .timeline-item--left .timeline-content { + padding-left: 0; + padding-right: var(--spacing-4); +} + +.timeline--centered .timeline-item--right { + margin-left: 50%; + padding-left: var(--spacing-8); + padding-right: 0; + text-align: left; +} + +.timeline--centered .timeline-item--right .timeline-marker { + left: -10px; +} + +.timeline--centered .timeline-item--right .timeline-content { + padding-left: var(--spacing-4); +} + +/* ========================================================================= + HORIZONTAL TIMELINE + ========================================================================= */ + +.timeline-horizontal { + display: flex; + position: relative; + padding-top: 20px; +} + +.timeline-horizontal::before { + content: ''; + position: absolute; + top: 26px; + left: 0; + right: 0; + height: 2px; + background: var(--color-slate-200); +} + +.timeline-h-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +.timeline-h-marker { + width: 14px; + height: 14px; + background: var(--color-white); + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-full); + z-index: 1; + transition: var(--transition-base); +} + +.timeline-h-marker--done { + background: var(--color-success); + border-color: var(--color-success); +} + +.timeline-h-marker--active { + background: var(--color-primary); + border-color: var(--color-primary); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); +} + +.timeline-h-content { + display: flex; + flex-direction: column; + align-items: center; + margin-top: var(--spacing-3); + text-align: center; +} + +.timeline-h-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + color: var(--color-dark); +} + +.timeline-h-date { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +/* ========================================================================= + TIMELINE WITH CARDS + ========================================================================= */ + +.timeline--cards { + padding-left: 48px; +} + +.timeline--cards::before { + left: 15px; +} + +.timeline-card { + padding: var(--spacing-5); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.timeline-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); +} + +.timeline-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--spacing-4); + margin-bottom: var(--spacing-3); +} + +.timeline-card__title { + margin: 0; + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.timeline-card__date { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + white-space: nowrap; +} + +.timeline-card__text { + margin: 0; + font-size: var(--font-size-sm); + color: var(--color-slate-500); + line-height: var(--line-height-relaxed); +} + +.timeline-card__footer { + display: flex; + gap: var(--spacing-2); + margin-top: var(--spacing-4); +} + +.timeline-card__tag { + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + border-radius: var(--radius-md); +} + +/* ========================================================================= + ACTIVITY FEED + ========================================================================= */ + +.activity-feed { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.activity-item { + display: flex; + align-items: flex-start; + gap: var(--spacing-4); + padding: var(--spacing-4); + background: var(--color-white); + border: 1px solid var(--color-slate-200); + border-radius: var(--radius-xl); + transition: var(--transition-base); +} + +.activity-item:hover { + border-color: var(--color-slate-300); +} + +.activity-avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + overflow: hidden; + flex-shrink: 0; +} + +.activity-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.activity-avatar--icon { + display: flex; + align-items: center; + justify-content: center; +} + +.activity-avatar--smart { + background: rgba(251, 191, 36, 0.15); + color: var(--color-smart); +} + +.activity-avatar--smart svg { + width: 20px; + height: 20px; +} + +.activity-content { + flex: 1; +} + +.activity-text { + margin: 0 0 var(--spacing-1); + font-size: var(--font-size-sm); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); +} + +.activity-text strong { + color: var(--color-dark); +} + +.activity-text a { + color: var(--color-primary); + text-decoration: none; +} + +.activity-text a:hover { + text-decoration: underline; +} + +.activity-time { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .timeline--centered::before { + left: 7px; + transform: none; + } + + .timeline--centered .timeline-item, + .timeline--centered .timeline-item--left, + .timeline--centered .timeline-item--right { + width: 100%; + margin-left: 0; + padding-left: 32px; + padding-right: 0; + text-align: left; + } + + .timeline--centered .timeline-item--left .timeline-marker, + .timeline--centered .timeline-item--right .timeline-marker { + left: -32px; + right: auto; + } + + .timeline--centered .timeline-item--left .timeline-content, + .timeline--centered .timeline-item--right .timeline-content { + padding-left: var(--spacing-4); + padding-right: 0; + } + + .timeline-horizontal { + flex-wrap: wrap; + gap: var(--spacing-4); + } + + .timeline-horizontal::before { + display: none; + } + + .timeline-h-item { + flex: 0 0 calc(50% - 8px); + } +} diff --git a/skills/documatica-v12-design-system/references/timeline.html b/skills/documatica-v12-design-system/references/timeline.html new file mode 100644 index 00000000..17bbef16 --- /dev/null +++ b/skills/documatica-v12-design-system/references/timeline.html @@ -0,0 +1,285 @@ + + + + + + Timeline — Documatica v12.0 + + + + + + +
+ + + + + + Вернуться к хабу + + +
+
+
+ Timeline Protocol v12.0 +
+

+ Timeline +

+
+ + +
+

01. Basic Timeline

+
+
+
+
+ Сегодня +

Проект запущен в продакшн

+

Все системы работают корректно. Нагрузка в пределах нормы.

+
+
+
+
+
+ Вчера +

Финальное тестирование

+

Пройдено 1,247 тестов. Все критические баги исправлены.

+
+
+
+
+
+ 2 дня назад +

Code Review завершён

+

Команда провела ревью всех pull request-ов.

+
+
+
+
+ + +
+

02. With Icons

+
+
+
+ + + +
+
+ 12:45 +

Оплата получена

+

Счёт #INV-2024-001 оплачен клиентом

+
+
+
+
+ + + +
+
+ 11:30 +

Документ создан

+

Договор_2024.pdf добавлен в систему

+
+
+
+
+ + + +
+
+ 10:15 +

AI анализ завершён

+

Документ классифицирован и проиндексирован

+
+
+
+
+ + + +
+
+ 09:00 +

Обнаружена проблема

+

Ошибка валидации в форме регистрации

+
+
+
+
+ + +
+

03. Alternating (Centered)

+
+
+
+
+ 2024 +

Запуск v12.0

+

Полный редизайн платформы

+
+
+
+
+
+ 2023 +

AI интеграция

+

Добавлен Smart Assistant

+
+
+
+
+
+ 2022 +

Первая версия

+

MVP запущен для бета-тестеров

+
+
+
+
+ + +
+

04. Horizontal Timeline

+
+
+
+
+ Заказ создан + 10 янв +
+
+
+
+
+ Оплачен + 10 янв +
+
+
+
+
+ В обработке + 11 янв +
+
+
+
+
+ Отправлен + — +
+
+
+
+
+ Доставлен + — +
+
+
+
+ + +
+

05. With Cards

+
+
+
+ + + +
+
+
+

Новый офис открыт

+ 15 января 2024 +
+

+ Мы открыли новый офис в Москва-Сити. Теперь команда работает в современном + пространстве площадью 500 м². +

+
+ Компания + Расширение +
+
+
+
+
+ + + +
+
+
+

Команда выросла до 50 человек

+ 1 декабря 2023 +
+

+ За последний квартал мы наняли 15 новых специалистов в отделы разработки, + дизайна и маркетинга. +

+
+
+
+
+ + +
+

06. Activity Feed

+
+
+
+ User +
+
+

+ Алексей Петров прокомментировал Документ #2451 +

+ 5 минут назад +
+
+
+
+ User +
+
+

+ Мария Иванова загрузила 3 новых файла в Проект Alpha +

+ 15 минут назад +
+
+
+
+ + + +
+
+

+ AI Assistant автоматически классифицировал 24 документа +

+ 1 час назад +
+
+
+
+ + + +
+ + + diff --git a/skills/documatica-v12-design-system/references/tokens.css b/skills/documatica-v12-design-system/references/tokens.css new file mode 100644 index 00000000..4914739d --- /dev/null +++ b/skills/documatica-v12-design-system/references/tokens.css @@ -0,0 +1,324 @@ +/** + * Documatica Design System v12.0 + * Design Tokens - Single Source of Truth + * + * Философия: "The v12.0 Spring" + * - Материальность: Элементы имеют вес и объем + * - Отклик: Hover = всплытие, Active = вдавливание + */ + +:root { + /* ========================================================================= + COLORS - Цветовая палитра + ========================================================================= */ + + /* Brand - Core Blue */ + --color-primary: #3b82f6; + --color-primary-hover: #2563eb; + --color-primary-light: #eff6ff; + --color-primary-border: #dbeafe; + --color-primary-shadow: rgba(59, 130, 246, 0.3); + --color-primary-shadow-hover: rgba(59, 130, 246, 0.5); + + /* Action - Smart Gold (AI) */ + --color-smart: #fbbf24; + --color-smart-hover: #f59e0b; + --color-smart-light: #fef3c7; + --color-smart-shadow: rgba(251, 191, 36, 0.3); + --color-smart-shadow-hover: rgba(251, 191, 36, 0.5); + + /* Ink - Dark Slate */ + --color-dark: #0f172a; + --color-dark-hover: #1e293b; + --color-dark-shadow: rgba(15, 23, 42, 0.1); + + /* Semantic - Success */ + --color-success: #10b981; + --color-success-hover: #059669; + --color-success-light: #ecfdf5; + --color-success-border: #a7f3d0; + --color-success-shadow: rgba(16, 185, 129, 0.2); + + /* Semantic - Danger */ + --color-danger: #dc2626; + --color-danger-hover: #b91c1c; + --color-danger-light: #fef2f2; + --color-danger-border: #fecaca; + --color-danger-shadow: rgba(220, 38, 38, 0.2); + + /* Semantic - Warning */ + --color-warning: #f59e0b; + --color-warning-hover: #d97706; + --color-warning-light: #fffbeb; + --color-warning-border: #fde68a; + + /* Semantic - Info */ + --color-info: #3b82f6; + --color-info-light: #eff6ff; + --color-info-border: #bfdbfe; + + /* Base - Soft Grey Scale */ + --color-white: #ffffff; + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + + /* ========================================================================= + TYPOGRAPHY - Типографика + ========================================================================= */ + + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + + /* Font Weights */ + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-bold: 700; + --font-weight-black: 900; + + /* Font Sizes */ + --font-size-xs: 8px; + --font-size-sm: 9px; + --font-size-base: 10px; + --font-size-md: 11px; + --font-size-lg: 12px; + --font-size-xl: 14px; + --font-size-2xl: 16px; + --font-size-3xl: 20px; + --font-size-4xl: 24px; + --font-size-5xl: 32px; + --font-size-6xl: 48px; + --font-size-7xl: 64px; + + /* Line Heights */ + --line-height-tight: 0.9; + --line-height-snug: 1.1; + --line-height-normal: 1.5; + --line-height-relaxed: 1.75; + + /* Letter Spacing */ + --tracking-tight: -0.05em; + --tracking-normal: 0; + --tracking-wide: 0.1em; + --tracking-wider: 0.2em; + --tracking-widest: 0.3em; + --tracking-ultra: 0.4em; + --tracking-mega: 0.5em; + + /* ========================================================================= + SPACING - Отступы + ========================================================================= */ + + --spacing-0: 0; + --spacing-1: 0.25rem; /* 4px */ + --spacing-2: 0.5rem; /* 8px */ + --spacing-3: 0.75rem; /* 12px */ + --spacing-4: 1rem; /* 16px */ + --spacing-5: 1.25rem; /* 20px */ + --spacing-6: 1.5rem; /* 24px */ + --spacing-8: 2rem; /* 32px */ + --spacing-10: 2.5rem; /* 40px */ + --spacing-12: 3rem; /* 48px */ + --spacing-16: 4rem; /* 64px */ + --spacing-20: 5rem; /* 80px */ + --spacing-24: 6rem; /* 96px */ + + /* ========================================================================= + BORDER RADIUS - Скругления + ========================================================================= */ + + --radius-none: 0; + --radius-sm: 0.375rem; /* 6px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 1rem; /* 16px */ + --radius-2xl: 1.5rem; /* 24px */ + --radius-3xl: 2rem; /* 32px */ + --radius-full: 9999px; + --radius-massive: 2.5rem; /* 40px */ + + /* ========================================================================= + SHADOWS - Тени + ========================================================================= */ + + --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 15px 30px -5px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); + + /* Colored Shadows */ + --shadow-primary: 0 15px 30px -5px var(--color-primary-shadow); + --shadow-primary-hover: 0 25px 50px -12px var(--color-primary-shadow-hover); + --shadow-smart: 0 15px 30px -5px var(--color-smart-shadow); + --shadow-smart-hover: 0 25px 50px -12px var(--color-smart-shadow-hover); + --shadow-dark: 0 20px 25px -5px var(--color-dark-shadow); + + /* ========================================================================= + TRANSITIONS - Анимации + ========================================================================= */ + + --transition-fast: all 0.15s ease; + --transition-base: all 0.2s ease; + --transition-slow: all 0.3s ease; + --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + --transition-arrow: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); + + /* ========================================================================= + Z-INDEX - Слои + ========================================================================= */ + + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; + --z-toast: 1080; + + /* ========================================================================= + BORDERS - Границы + ========================================================================= */ + + --border-width-thin: 1px; + --border-width-base: 2px; + --border-width-thick: 3px; + + /* ========================================================================= + COMPONENT SPECIFIC + ========================================================================= */ + + /* Input Heights */ + --input-height-sm: 2.5rem; /* 40px */ + --input-height-md: 3rem; /* 48px */ + --input-height-lg: 3.5rem; /* 56px */ + + /* Sidebar */ + --sidebar-width: 260px; + --sidebar-collapsed-width: 80px; + + /* Navbar */ + --navbar-height: 64px; + + /* Card */ + --card-padding: var(--spacing-6); + --card-radius: var(--radius-2xl); +} + +/* ========================================================================= + GLOBAL RESETS & BASE + ========================================================================= */ + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 16px; + -webkit-text-size-adjust: 100%; +} + +body { + font-family: var(--font-family); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-normal); + color: var(--color-slate-900); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ========================================================================= + PATTERN BACKGROUNDS + ========================================================================= */ + +.pattern-light { + background-color: var(--color-slate-50); + background-image: radial-gradient(var(--color-primary) 1px, transparent 1px); + background-size: 32px 32px; +} + +.pattern-dark { + background-color: var(--color-dark); + background-image: radial-gradient(var(--color-slate-700) 1px, transparent 1px); + background-size: 32px 32px; +} + +/* ========================================================================= + UTILITY CLASSES + ========================================================================= */ + +/* Text Colors */ +.text-primary { color: var(--color-primary); } +.text-smart { color: var(--color-smart); } +.text-success { color: var(--color-success); } +.text-danger { color: var(--color-danger); } +.text-warning { color: var(--color-warning); } +.text-dark { color: var(--color-dark); } +.text-muted { color: var(--color-slate-400); } +.text-light { color: var(--color-slate-300); } + +/* Background Colors */ +.bg-primary { background-color: var(--color-primary); } +.bg-smart { background-color: var(--color-smart); } +.bg-dark { background-color: var(--color-dark); } +.bg-white { background-color: var(--color-white); } +.bg-slate-50 { background-color: var(--color-slate-50); } +.bg-slate-100 { background-color: var(--color-slate-100); } + +/* Font Weights */ +.font-regular { font-weight: var(--font-weight-regular); } +.font-medium { font-weight: var(--font-weight-medium); } +.font-bold { font-weight: var(--font-weight-bold); } +.font-black { font-weight: var(--font-weight-black); } + +/* Text Transform */ +.uppercase { text-transform: uppercase; } +.lowercase { text-transform: lowercase; } +.capitalize { text-transform: capitalize; } + +/* Accessibility */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Focus Visible */ +.focus-ring:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* ========================================================================= + REDUCED MOTION + ========================================================================= */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/skills/documatica-v12-design-system/references/typography.css b/skills/documatica-v12-design-system/references/typography.css new file mode 100644 index 00000000..346bf4d2 --- /dev/null +++ b/skills/documatica-v12-design-system/references/typography.css @@ -0,0 +1,781 @@ +/** + * Documatica Design System v12.0 + * Typography Showcase + */ + +/* ========================================================================= + LAYOUT + ========================================================================= */ + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--spacing-20) var(--spacing-6); +} + +.back-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-10); + font-size: var(--font-size-md); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-decoration: none; + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + transition: var(--transition-base); +} + +.back-link svg { + width: 20px; + height: 20px; + transition: var(--transition-arrow); +} + +.back-link:hover { + color: var(--color-primary); +} + +.back-link:hover svg { + transform: translateX(-4px); +} + +.header { + margin-bottom: var(--spacing-16); +} + +.header__status { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-6); +} + +.status-dot { + width: 12px; + height: 12px; + background-color: var(--color-smart); + border-radius: var(--radius-full); + box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); +} + +.status-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-ultra); +} + +.header__title { + font-size: clamp(48px, 8vw, 80px); + font-weight: var(--font-weight-black); + text-transform: uppercase; + letter-spacing: var(--tracking-tight); + line-height: var(--line-height-tight); + color: var(--color-dark); +} + +.section { + margin-bottom: var(--spacing-16); +} + +.section__label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-mega); + margin-bottom: var(--spacing-8); + padding-bottom: var(--spacing-4); + border-bottom: 1px solid var(--color-slate-200); +} + +.footer { + margin-top: var(--spacing-20); + padding-top: var(--spacing-10); + border-top: 1px solid var(--color-slate-200); + text-align: center; +} + +.footer__text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-black); + color: var(--color-slate-200); + text-transform: uppercase; + letter-spacing: 1em; +} + +/* ========================================================================= + FONT FAMILY + ========================================================================= */ + +.type-box { + background: var(--color-white); + border-radius: var(--radius-2xl); + padding: var(--spacing-8); + box-shadow: var(--shadow-md); +} + +.font-display { + font-size: 80px; + font-weight: var(--font-weight-black); + color: var(--color-dark); + margin-bottom: var(--spacing-2); +} + +.font-meta { + font-size: var(--font-size-sm); + color: var(--color-slate-400); + margin-bottom: var(--spacing-6); +} + +.font-alphabet { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + color: var(--color-slate-600); + letter-spacing: 0.1em; + margin-bottom: var(--spacing-2); +} + +.font-alphabet--lower { + text-transform: lowercase; +} + +/* ========================================================================= + FONT WEIGHTS + ========================================================================= */ + +.weights-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-4); +} + +.weight-item { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-6); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.weight-sample { + font-size: 64px; + color: var(--color-dark); +} + +.weight-sample--regular { + font-weight: 400; +} + +.weight-sample--medium { + font-weight: 500; +} + +.weight-sample--bold { + font-weight: 700; +} + +.weight-sample--black { + font-weight: 900; +} + +.weight-name { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); + color: var(--color-dark); +} + +.weight-value { + font-size: var(--font-size-xs); + color: var(--color-slate-400); +} + +/* ========================================================================= + HEADINGS + ========================================================================= */ + +.headings-list { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +.heading-item { + padding: var(--spacing-6); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.heading-meta { + display: block; + font-size: var(--font-size-xs); + font-family: 'SF Mono', monospace; + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.type-h1 { + font-size: 72px; + font-weight: var(--font-weight-black); + letter-spacing: -0.02em; + color: var(--color-dark); + margin: 0; +} + +.type-h2 { + font-size: 48px; + font-weight: var(--font-weight-black); + letter-spacing: -0.02em; + color: var(--color-dark); + margin: 0; +} + +.type-h3 { + font-size: 36px; + font-weight: var(--font-weight-bold); + letter-spacing: -0.01em; + color: var(--color-dark); + margin: 0; +} + +.type-h4 { + font-size: 24px; + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin: 0; +} + +.type-h5 { + font-size: 20px; + font-weight: var(--font-weight-bold); + color: var(--color-dark); + margin: 0; +} + +.type-h6 { + font-size: 16px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + DISPLAY TEXT + ========================================================================= */ + +.display-box { + padding: var(--spacing-6); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + margin-bottom: var(--spacing-4); + overflow: hidden; +} + +.display-meta { + display: block; + font-size: var(--font-size-xs); + font-family: 'SF Mono', monospace; + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.type-display-xl { + font-size: 96px; + font-weight: var(--font-weight-black); + letter-spacing: -0.03em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +.type-display-lg { + font-size: 72px; + font-weight: var(--font-weight-black); + letter-spacing: -0.02em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +.type-display-md { + font-size: 48px; + font-weight: var(--font-weight-black); + letter-spacing: -0.02em; + color: var(--color-dark); + margin: 0; +} + +/* ========================================================================= + BODY TEXT + ========================================================================= */ + +.body-list { + display: flex; + flex-direction: column; + gap: var(--spacing-4); +} + +.body-item { + padding: var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.body-meta { + display: block; + font-size: var(--font-size-xs); + font-family: 'SF Mono', monospace; + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.type-body-lg { + font-size: 18px; + font-weight: 400; + line-height: 1.75; + color: var(--color-slate-600); + margin: 0; +} + +.type-body-base { + font-size: 16px; + font-weight: 400; + line-height: 1.625; + color: var(--color-slate-600); + margin: 0; +} + +.type-body-sm { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: var(--color-slate-600); + margin: 0; +} + +.type-body-xs { + font-size: 12px; + font-weight: 400; + line-height: 1.5; + color: var(--color-slate-600); + margin: 0; +} + +/* ========================================================================= + LABELS + ========================================================================= */ + +.labels-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-4); +} + +.label-item { + padding: var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.label-meta { + display: block; + font-size: var(--font-size-xs); + font-family: 'SF Mono', monospace; + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.type-label-lg { + font-size: 14px; + font-weight: var(--font-weight-black); + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +.type-label-md { + font-size: 12px; + font-weight: var(--font-weight-black); + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +.type-label-sm { + font-size: 10px; + font-weight: var(--font-weight-black); + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--color-dark); + margin: 0; +} + +.type-caption { + font-size: 12px; + font-weight: var(--font-weight-medium); + color: var(--color-slate-500); + margin: 0; +} + +.type-overline { + font-size: 11px; + font-weight: var(--font-weight-black); + letter-spacing: 0.5em; + text-transform: uppercase; + color: var(--color-slate-400); + margin: 0; +} + +/* ========================================================================= + TEXT STYLES + ========================================================================= */ + +.styles-list { + display: flex; + flex-direction: column; + gap: var(--spacing-3); +} + +.style-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.style-demo { + font-size: var(--font-size-lg); + color: var(--color-dark); +} + +.type-strong { + font-weight: var(--font-weight-bold); +} + +.type-emphasis { + font-style: italic; +} + +.type-underline { + text-decoration: underline; + text-underline-offset: 4px; +} + +.type-strikethrough { + text-decoration: line-through; + color: var(--color-slate-400); +} + +.type-link { + color: var(--color-primary); + text-decoration: underline; + text-underline-offset: 4px; +} + +.type-highlight { + background: rgba(251, 191, 36, 0.3); + padding: 2px 6px; + border-radius: 4px; +} + +.style-code { + font-family: 'SF Mono', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-400); + background: var(--color-slate-100); + padding: var(--spacing-1) var(--spacing-2); + border-radius: var(--radius-md); +} + +/* ========================================================================= + CODE + ========================================================================= */ + +.code-box { + padding: var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + margin-bottom: var(--spacing-4); +} + +.code-meta { + display: block; + font-size: var(--font-size-xs); + font-family: 'SF Mono', monospace; + color: var(--color-slate-400); + margin-bottom: var(--spacing-3); +} + +.code-sample { + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); +} + +.type-code { + font-family: 'SF Mono', Monaco, Consolas, monospace; + font-size: 14px; + color: var(--color-primary); + background: rgba(59, 130, 246, 0.1); + padding: 2px 8px; + border-radius: var(--radius-md); +} + +.type-pre { + background: var(--color-dark); + border-radius: var(--radius-xl); + padding: var(--spacing-6); + overflow-x: auto; + margin: 0; +} + +.type-pre code { + font-family: 'SF Mono', Monaco, Consolas, monospace; + font-size: 14px; + line-height: 1.7; + color: var(--color-slate-300); +} + +/* ========================================================================= + LISTS + ========================================================================= */ + +.lists-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-4); +} + +.list-box { + padding: var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.list-box--full { + grid-column: span 2; +} + +.list-meta { + display: block; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-black); + color: var(--color-slate-400); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + margin-bottom: var(--spacing-4); +} + +.type-ul, +.type-ol { + font-size: var(--font-size-base); + color: var(--color-slate-600); + line-height: var(--line-height-relaxed); + padding-left: var(--spacing-6); + margin: 0; +} + +.type-ul li, +.type-ol li { + margin-bottom: var(--spacing-2); +} + +.type-check-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + gap: var(--spacing-3); +} + +.type-check-list li { + display: flex; + align-items: center; + gap: var(--spacing-2); + font-size: var(--font-size-base); + color: var(--color-slate-600); +} + +.type-check-list li::before { + content: ''; + width: 20px; + height: 20px; + border: 2px solid var(--color-slate-300); + border-radius: var(--radius-md); + flex-shrink: 0; +} + +.type-check-list li.checked::before { + background: var(--color-primary); + border-color: var(--color-primary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); + background-size: 14px; + background-position: center; + background-repeat: no-repeat; +} + +/* ========================================================================= + BLOCKQUOTE + ========================================================================= */ + +.type-blockquote { + position: relative; + padding: var(--spacing-8); + padding-left: var(--spacing-10); + background: var(--color-white); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-md); + margin: 0; +} + +.type-blockquote::before { + content: '"'; + position: absolute; + top: var(--spacing-4); + left: var(--spacing-6); + font-size: 80px; + font-weight: var(--font-weight-black); + color: var(--color-primary); + opacity: 0.2; + line-height: 1; +} + +.type-blockquote p { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-medium); + font-style: italic; + color: var(--color-dark); + line-height: var(--line-height-relaxed); + margin: 0 0 var(--spacing-4); +} + +.type-blockquote__footer { + font-size: var(--font-size-sm); + color: var(--color-slate-500); +} + +.type-blockquote__footer cite { + font-style: normal; + font-weight: var(--font-weight-bold); +} + +/* ========================================================================= + TEXT COLORS + ========================================================================= */ + +.colors-list { + display: flex; + flex-direction: column; + gap: var(--spacing-2); +} + +.color-text-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-4) var(--spacing-5); + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); +} + +.color-text-item span { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); +} + +.color-text-item code { + font-family: 'SF Mono', monospace; + font-size: var(--font-size-sm); + color: var(--color-slate-400); +} + +.text-dark { + color: var(--color-dark); +} + +.text-secondary { + color: var(--color-slate-600); +} + +.text-muted { + color: var(--color-slate-400); +} + +.text-primary { + color: var(--color-primary); +} + +.text-smart { + color: var(--color-smart); +} + +.text-success { + color: var(--color-success); +} + +.text-danger { + color: var(--color-danger); +} + +/* ========================================================================= + RESPONSIVE + ========================================================================= */ + +@media (max-width: 768px) { + .container { + padding: var(--spacing-10) var(--spacing-4); + } + + .weights-grid { + grid-template-columns: repeat(2, 1fr); + } + + .labels-grid { + grid-template-columns: 1fr; + } + + .lists-grid { + grid-template-columns: 1fr; + } + + .list-box--full { + grid-column: span 1; + } + + .type-h1 { + font-size: 48px; + } + + .type-h2 { + font-size: 36px; + } + + .type-display-xl { + font-size: 64px; + } + + .type-display-lg { + font-size: 48px; + } +} diff --git a/skills/documatica-v12-design-system/references/typography.html b/skills/documatica-v12-design-system/references/typography.html new file mode 100644 index 00000000..e819b311 --- /dev/null +++ b/skills/documatica-v12-design-system/references/typography.html @@ -0,0 +1,315 @@ + + + + + + Typography — Documatica v12.0 + + + + + + +
+ + + + + + + Вернуться к хабу + + +
+
+
+ Type Protocol v12.0 +
+

+ Typography +

+
+ + +
+

01. Font Family

+
+

Inter

+

Primary Font • Sans-Serif • Google Fonts

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

0123456789 !@#$%^&*()_+-=

+
+
+ + +
+

02. Font Weights

+
+
+ Aa + Regular + 400 +
+
+ Aa + Medium + 500 +
+
+ Aa + Bold + 700 +
+
+ Aa + Black + 900 +
+
+
+ + +
+

03. Headings

+
+
+ H1 / 72px / Black / -0.02em +

Documatica

+
+
+ H2 / 48px / Black / -0.02em +

AI-платформа для документов

+
+
+ H3 / 36px / Bold / -0.01em +

Интеллектуальная обработка

+
+
+ H4 / 24px / Bold / 0em +

Управление документами нового поколения

+
+
+ H5 / 20px / Bold / 0em +
Безопасность корпоративного уровня
+
+
+ H6 / 16px / Bold / 0.05em +
Сертификация ISO 27001
+
+
+
+ + +
+

04. Display Text

+
+ Display XL / 96px / Black / -0.03em / Uppercase +

MEGA

+
+
+ Display LG / 72px / Black / -0.02em / Uppercase +

HEADLINE

+
+
+ Display MD / 48px / Black / -0.02em +

Заголовок раздела

+
+
+ + +
+

05. Body Text

+
+
+ Body Large / 18px / Regular / 1.75 line-height +

Documatica использует продвинутые алгоритмы машинного обучения для автоматического анализа, классификации и извлечения данных из документов. Платформа поддерживает более 50 форматов файлов и распознаёт текст на 40+ языках.

+
+
+ Body Base / 16px / Regular / 1.625 line-height +

Documatica использует продвинутые алгоритмы машинного обучения для автоматического анализа, классификации и извлечения данных из документов. Платформа поддерживает более 50 форматов файлов и распознаёт текст на 40+ языках.

+
+
+ Body Small / 14px / Regular / 1.5 line-height +

Documatica использует продвинутые алгоритмы машинного обучения для автоматического анализа, классификации и извлечения данных из документов. Платформа поддерживает более 50 форматов файлов.

+
+
+ Body XS / 12px / Regular / 1.5 line-height +

Documatica использует продвинутые алгоритмы машинного обучения для автоматического анализа, классификации и извлечения данных из документов.

+
+
+
+ + +
+

06. Labels & Captions

+
+
+ Label LG / 14px / Black / 0.2em / Uppercase +

SECTION LABEL

+
+
+ Label MD / 12px / Black / 0.15em / Uppercase +

STATUS LABEL

+
+
+ Label SM / 10px / Black / 0.3em / Uppercase +

MICRO LABEL

+
+
+ Caption / 12px / Medium / 0em +

Подпись к изображению или таблице

+
+
+ Overline / 11px / Black / 0.5em / Uppercase +

CATEGORY

+
+
+
+ + +
+

07. Text Styles

+
+
+ Жирный текст (Bold) + <strong> или font-weight: 700 +
+
+ Курсивный текст (Italic) + <em> или font-style: italic +
+
+ Подчёркнутый текст + text-decoration: underline +
+
+ Зачёркнутый текст + <del> или text-decoration: line-through +
+
+ Ссылка с подчёркиванием + <a href="#"> +
+
+ Выделенный текст + <mark> или background highlight +
+
+
+ + +
+

08. Code & Monospace

+
+ Inline Code / SF Mono / 14px +

Используйте npm install documatica для установки пакета.

+
+
+ Code Block / SF Mono / 14px / Dark Theme + 
import { Documatica } from 'documatica';
+
+const client = new Documatica({
+  apiKey: process.env.DOCUMATICA_API_KEY,
+  region: 'eu-west-1'
+});
+
+const result = await client.analyze({
+  file: './contract.pdf',
+  extractEntities: true,
+  language: 'ru'
+});
+
+
+ + +
+

09. Lists

+
+
+ Unordered List +
    +
  • Автоматическая классификация
    • +
  • OCR распознавание текста
    • +
  • Извлечение ключевых данных
    • +
  • Интеграция с CRM системами
    • +
+
+
+ Ordered List +
    +
  1. Загрузите документ
    2. +
  2. Дождитесь анализа AI
    3. +
  3. Проверьте результаты
    4. +
  4. Экспортируйте данные
    5. +
+
+
+ Check List +
    +
  • Шифрование AES-256
    • +
  • Сертификация ISO 27001
    • +
  • Хранение в ЕС
    • +
  • Аудит SOC 2 (в процессе)
    • +
+
+
+
+ + +
+

10. Blockquote

+
+

«Documatica сократила время обработки документов в нашей компании на 87%. То, на что раньше уходило несколько дней, теперь занимает минуты.»

+
+ Алексей Петров, CFO TechCorp +
+
+
+ + +
+

11. Text Colors

+
+
+ Primary Text (Dark Slate) + #0f172a +
+
+ Secondary Text (Slate 600) + #475569 +
+
+ Muted Text (Slate 400) + #94a3b8 +
+
+ Primary Blue + #3b82f6 +
+
+ Smart Gold + #fbbf24 +
+
+ Success Green + #10b981 +
+
+ Danger Red + #dc2626 +
+
+
+ + + + +
+ + +