i18n(uk): add resources/, scripts/, docs/, prompts/ translations
- Translate resources/ (README, QUICK-START, DESIGN-SYSTEM) - Translate scripts/README.md (EPUB builder docs) - Copy docs/ and prompts/ as-is (internal planning + functional prompts) - Copy claude_concepts_guide.md (base for in-place translation) Ref: luongnv89/claude-howto#63
This commit is contained in:
Evgenij I
121
uk/resources/DESIGN-SYSTEM.md
Normal file
121
uk/resources/DESIGN-SYSTEM.md
Normal file
@@ -0,0 +1,121 @@
|
||||
# Claude How To — Дизайн-система
|
||||
|
||||
## Візуальна ідентичність
|
||||
|
||||
### Концепція дизайну іконки: Компас з кодовою дужкою
|
||||
|
||||
Іконка Claude How To використовує **компас з кодовою дужкою `>`** для представлення направленої навігації кодом:
|
||||
|
||||
```
|
||||
N (green)
|
||||
▲
|
||||
│
|
||||
W ───>─── E Compass = Guidance/Direction
|
||||
│ > Bracket = Code/Terminal/CLI
|
||||
▼
|
||||
S (black)
|
||||
```
|
||||
|
||||
Це створює:
|
||||
- **Візуальна ясність**: Одразу комунікує "гайд з навігації кодом"
|
||||
- **Символічне значення**: Компас = пошук шляху; `>` = код/термінал
|
||||
- **Масштабованість**: Працює при будь-якому розмірі від 16px до 512px
|
||||
- **Відповідність бренду**: Відповідає естетиці інструменту розробника з мінімальною палітрою
|
||||
|
||||
---
|
||||
|
||||
## Кольорова система
|
||||
|
||||
### Палітра
|
||||
|
||||
| Колір | Hex | RGB | Використання |
|
||||
|-------|-----|-----|-------------|
|
||||
| Чорний (основний) | `#000000` | 0, 0, 0 | Основні обведення, текст, південна стрілка |
|
||||
| Білий (фон) | `#FFFFFF` | 255, 255, 255 | Світлі фони |
|
||||
| Сірий (вторинний) | `#6B7280` | 107, 114, 128 | Малі позначки, вторинний текст |
|
||||
| Яскраво-зелений (акцент) | `#22C55E` | 34, 197, 94 | Північна стрілка, центральна точка, акцентні лінії |
|
||||
| Майже чорний (темний фон) | `#0A0A0A` | 10, 10, 10 | Фони dark mode |
|
||||
|
||||
### Коефіцієнти контрасту (WCAG)
|
||||
|
||||
- Чорний на білому: **21:1** AAA
|
||||
- Сірий на білому: **4.6:1** AA
|
||||
- Зелений на білому: **3.2:1** (тільки декоративний, не для тексту)
|
||||
- Білий на темному: **19.5:1** AAA
|
||||
|
||||
### Правило акцентного кольору
|
||||
|
||||
**Яскраво-зелений (#22C55E) зарезервований тільки для виділень:**
|
||||
- Північна стрілка компасу
|
||||
- Центральна точка
|
||||
- Акцентні підкреслення/рамки
|
||||
- Ніколи як фон
|
||||
- Ніколи для основного тексту
|
||||
|
||||
---
|
||||
|
||||
## Типографіка
|
||||
|
||||
### Шрифт логотипу
|
||||
- **Сімейство**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif
|
||||
- **"Claude"**: 42px, weight 700 (bold), Чорний
|
||||
- **"How-To"**: 32px, weight 500 (medium), Сірий (#6B7280)
|
||||
- **Підзаголовок**: 10px, weight 500, Сірий, letter-spacing 1.5px, uppercase
|
||||
|
||||
---
|
||||
|
||||
## Деталі іконки
|
||||
|
||||
### Специфікації компасу
|
||||
|
||||
```
|
||||
Element | Stroke/Fill | Color
|
||||
--------------------|----------------|------------------
|
||||
Outer ring | 3px stroke | Black / White (dark mode)
|
||||
North tick | 2.5px stroke | Black / White (dark mode)
|
||||
Other cardinal ticks| 2px stroke | Gray / White 50% (dark mode)
|
||||
Intercardinal ticks | 1.5px stroke | Gray / White 40% (dark mode)
|
||||
North needle | filled polygon | #22C55E (always green)
|
||||
South needle | filled polygon | Black / White (dark mode)
|
||||
> bracket | 3px stroke | Black / White (dark mode)
|
||||
Center dot | filled circle | #22C55E (always green)
|
||||
```
|
||||
|
||||
### Прогресія розмірів
|
||||
|
||||
```
|
||||
16px → Кільце + стрілки + шеврон (мінімально)
|
||||
32px → Додаються кардинальні позначки
|
||||
64px → Додаються інтеркардинальні позначки
|
||||
128px → Повна деталізація, всі елементи чіткі
|
||||
256px → Максимальна деталізація, товсті обведення
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Настанови з розмірів
|
||||
|
||||
### Розміри логотипу
|
||||
- **Мінімум**: 200px ширина (для веб)
|
||||
- **Рекомендовано**: 520px (нативний розмір)
|
||||
- **Максимум**: Необмежено (векторний формат)
|
||||
- **Пропорції**: ~4.3:1 (ширина:висота)
|
||||
|
||||
### Розміри іконки
|
||||
- **Мінімум**: 16px (фавікон)
|
||||
- **Рекомендовано**: 64-256px (додатки, аватари)
|
||||
- **Максимум**: Необмежено (векторний формат)
|
||||
- **Пропорції**: 1:1 (квадрат)
|
||||
|
||||
---
|
||||
|
||||
## Доступність
|
||||
|
||||
- Усі тексти відповідають WCAG AA (мінімум 4.5:1)
|
||||
- Зелений акцент — декоративний, не інформаційний
|
||||
- Без залежності від червоно-зеленого розрізнення
|
||||
|
||||
---
|
||||
|
||||
**Останнє оновлення**: Лютий 2026
|
||||
**Версія дизайн-системи**: 3.0
|
||||
89
uk/resources/QUICK-START.md
Normal file
89
uk/resources/QUICK-START.md
Normal file
@@ -0,0 +1,89 @@
|
||||
# Швидкий старт — Брендові ресурси
|
||||
|
||||
## Копіювання ресурсів у ваш проєкт
|
||||
|
||||
```bash
|
||||
# Copy all resources to your web project
|
||||
cp -r resources/ /path/to/your/website/
|
||||
|
||||
# Or just the favicons for web
|
||||
cp resources/favicons/* /path/to/your/website/public/
|
||||
```
|
||||
|
||||
## Додавання в HTML (копіювання та вставка)
|
||||
|
||||
```html
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
<meta name="theme-color" content="#000000">
|
||||
```
|
||||
|
||||
## Використання в Markdown/документації
|
||||
|
||||
```markdown
|
||||
# Claude How To
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
## Рекомендовані розміри
|
||||
|
||||
| Призначення | Розмір | Файл |
|
||||
|-------------|--------|------|
|
||||
| Заголовок сайту | 520×120 | `logos/claude-howto-logo.svg` |
|
||||
| Іконка додатку | 256×256 | `icons/claude-howto-icon.svg` |
|
||||
| Вкладка браузера | 32×32 | `favicons/favicon-32.svg` |
|
||||
| Домашній екран мобільного | 128×128 | `favicons/favicon-128.svg` |
|
||||
| Десктопний додаток | 256×256 | `favicons/favicon-256.svg` |
|
||||
| Малий аватар | 64×64 | `favicons/favicon-64.svg` |
|
||||
|
||||
## Значення кольорів
|
||||
|
||||
```css
|
||||
/* Use these in your CSS */
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #6B7280;
|
||||
--color-accent: #22C55E;
|
||||
--color-bg-light: #FFFFFF;
|
||||
--color-bg-dark: #0A0A0A;
|
||||
```
|
||||
|
||||
## Значення дизайну іконки
|
||||
|
||||
**Компас з кодовою дужкою**:
|
||||
- Кільце компасу = Навігація, структурований навчальний шлях
|
||||
- Зелена північна стрілка = Напрямок, прогрес, керівництво
|
||||
- Чорна південна стрілка = Основа, міцний фундамент
|
||||
- Дужка `>` = Промпт терміналу, код, контекст CLI
|
||||
- Позначки = Точність, структуровані кроки
|
||||
|
||||
Це символізує "пошук шляху через код з чітким керівництвом".
|
||||
|
||||
## Що і де використовувати
|
||||
|
||||
### Сайт
|
||||
- **Заголовок**: Логотип (`logos/claude-howto-logo.svg`)
|
||||
- **Фавікон**: 32px (`favicons/favicon-32.svg`)
|
||||
- **Соціальний превʼю**: Іконка (`icons/claude-howto-icon.svg`)
|
||||
|
||||
### GitHub
|
||||
- **Бейдж README**: Іконка 64-128px
|
||||
- **Аватар репозиторію**: Іконка
|
||||
|
||||
### Соціальні мережі
|
||||
- **Аватар**: Іконка 256×256px
|
||||
- **Банер**: Логотип 520×120px
|
||||
- **Мініатюра**: Іконка 256×256px
|
||||
|
||||
### Документація
|
||||
- **Заголовки розділів**: Логотип або іконка (масштабовані)
|
||||
- **Іконки навігації**: Фавікон 32-64px
|
||||
|
||||
---
|
||||
|
||||
Див. [README.md](README.md) для повної документації.
|
||||
154
uk/resources/README.md
Normal file
154
uk/resources/README.md
Normal file
@@ -0,0 +1,154 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude How To — Брендові ресурси
|
||||
|
||||
Повна колекція логотипів, іконок та фавіконів для проєкту Claude How To. Усі ресурси використовують дизайн V3.0: компас з символом кодової дужки (`>`), що представляє направлену навігацію кодом — з палітрою Чорний/Білий/Сірий та акцентом Яскраво-зелений (#22C55E).
|
||||
|
||||
## Структура каталогів
|
||||
|
||||
```
|
||||
resources/
|
||||
├── logos/
|
||||
│ ├── claude-howto-logo.svg # Основний логотип - Light mode (520×120px)
|
||||
│ └── claude-howto-logo-dark.svg # Основний логотип - Dark mode (520×120px)
|
||||
├── icons/
|
||||
│ ├── claude-howto-icon.svg # Іконка додатку - Light mode (256×256px)
|
||||
│ └── claude-howto-icon-dark.svg # Іконка додатку - Dark mode (256×256px)
|
||||
└── favicons/
|
||||
├── favicon-16.svg # Фавікон - 16×16px
|
||||
├── favicon-32.svg # Фавікон - 32×32px (основний)
|
||||
├── favicon-64.svg # Фавікон - 64×64px
|
||||
├── favicon-128.svg # Фавікон - 128×128px
|
||||
└── favicon-256.svg # Фавікон - 256×256px
|
||||
```
|
||||
|
||||
Додаткові ресурси в `assets/logo/`:
|
||||
```
|
||||
assets/logo/
|
||||
├── logo-full.svg # Знак + текст (горизонтально)
|
||||
├── logo-mark.svg # Тільки символ компасу (120×120px)
|
||||
├── logo-wordmark.svg # Тільки текст
|
||||
├── logo-icon.svg # Іконка додатку (512×512, округлена)
|
||||
├── favicon.svg # 16×16 оптимізований
|
||||
├── logo-white.svg # Біла версія для темних фонів
|
||||
└── logo-black.svg # Чорна монохромна версія
|
||||
```
|
||||
|
||||
## Огляд ресурсів
|
||||
|
||||
### Концепція дизайну (V3.0)
|
||||
|
||||
**Компас з кодовою дужкою** — навігація зустрічає код:
|
||||
- **Кільце компасу** = Навігація, пошук шляху
|
||||
- **Північна стрілка (зелена)** = Напрямок, прогрес на навчальному шляху
|
||||
- **Південна стрілка (чорна)** = Основа, міцний фундамент
|
||||
- **Дужка `>`** = Промпт терміналу, код, контекст CLI
|
||||
- **Позначки** = Точність, структуроване навчання
|
||||
|
||||
### Логотипи
|
||||
|
||||
**Файли**:
|
||||
- `logos/claude-howto-logo.svg` (Light mode)
|
||||
- `logos/claude-howto-logo-dark.svg` (Dark mode)
|
||||
|
||||
**Специфікації**:
|
||||
- **Розмір**: 520×120 px
|
||||
- **Призначення**: Основний логотип заголовку/брендингу з текстом
|
||||
- **Використання**: Заголовки сайтів, бейджі README, маркетингові матеріали, друковані матеріали
|
||||
- **Формат**: SVG (повністю масштабований)
|
||||
- **Режими**: Light (білий фон) та Dark (фон #0A0A0A)
|
||||
|
||||
### Іконки
|
||||
|
||||
**Файли**:
|
||||
- `icons/claude-howto-icon.svg` (Light mode)
|
||||
- `icons/claude-howto-icon-dark.svg` (Dark mode)
|
||||
|
||||
**Специфікації**:
|
||||
- **Розмір**: 256×256 px
|
||||
- **Призначення**: Іконка додатку, аватари, мініатюри
|
||||
- **Формат**: SVG (повністю масштабований)
|
||||
|
||||
### Фавікони
|
||||
|
||||
Оптимізовані версії різних розмірів для веб-використання:
|
||||
|
||||
| Файл | Розмір | DPI | Використання |
|
||||
|------|--------|-----|-------------|
|
||||
| `favicon-16.svg` | 16×16 px | 1x | Вкладки браузера (старі браузери) |
|
||||
| `favicon-32.svg` | 32×32 px | 1x | Стандартний фавікон |
|
||||
| `favicon-64.svg` | 64×64 px | 1x-2x | Дисплеї High-DPI |
|
||||
| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon, закладки |
|
||||
| `favicon-256.svg` | 256×256 px | 4x | Сучасні браузери, іконки PWA |
|
||||
|
||||
## Інтеграція HTML
|
||||
|
||||
### Базове налаштування фавіконів
|
||||
|
||||
```html
|
||||
<!-- Browser favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||
|
||||
<!-- Apple touch icon (mobile home screen) -->
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
|
||||
<!-- PWA & modern browsers -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
```
|
||||
|
||||
## Палітра кольорів
|
||||
|
||||
### Основні кольори
|
||||
- **Чорний**: `#000000` (Основний текст, обведення, південна стрілка)
|
||||
- **Білий**: `#FFFFFF` (Світлі фони)
|
||||
- **Сірий**: `#6B7280` (Вторинний текст, малі позначки)
|
||||
|
||||
### Акцентний колір
|
||||
- **Яскраво-зелений**: `#22C55E` (Північна стрілка, центральна точка, акцентні лінії — тільки для виділень, ніколи як фон)
|
||||
|
||||
### Dark mode
|
||||
- **Фон**: `#0A0A0A` (Майже чорний)
|
||||
|
||||
### CSS-змінні
|
||||
```css
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #6B7280;
|
||||
--color-accent: #22C55E;
|
||||
--color-bg-light: #FFFFFF;
|
||||
--color-bg-dark: #0A0A0A;
|
||||
```
|
||||
|
||||
## Настанови з дизайну
|
||||
|
||||
### Використання логотипу
|
||||
- Використовуйте на білому або темному (#0A0A0A) фоні
|
||||
- Масштабуйте пропорційно
|
||||
- Залишайте вільний простір навколо (мінімум: висота логотипу / 2)
|
||||
- Використовуйте надані light/dark варіанти для відповідних фонів
|
||||
|
||||
### Доступність
|
||||
- Високі коефіцієнти контрасту (WCAG AA — мінімум 4.5:1)
|
||||
- Чисті геометричні форми, розпізнавані при будь-якому розмірі
|
||||
- Масштабований векторний формат
|
||||
- Без тексту в іконках (текст додається окремо)
|
||||
- Без залежності від червоно-зеленого розрізнення кольорів
|
||||
|
||||
## Атрибуція
|
||||
|
||||
Ці ресурси є частиною проєкту Claude How To.
|
||||
|
||||
**Ліцензія**: MIT (див. файл LICENSE проєкту)
|
||||
|
||||
## Історія версій
|
||||
|
||||
- **v3.0** (Лютий 2026): Дизайн компас-дужка з палітрою Чорний/Білий/Сірий + Зелений акцент
|
||||
- **v2.0** (Січень 2026): Дизайн 12-променевого зоряного спалаху в стилі Claude з смарагдовою палітрою
|
||||
- **v1.0** (Січень 2026): Оригінальний дизайн іконки прогресії на основі шестикутника
|
||||
|
||||
---
|
||||
**Останнє оновлення**: Лютий 2026
|
||||
**Поточна версія**: 3.0 (Компас-дужка)
|
||||
Reference in New Issue
Block a user