> For the complete documentation index, see [llms.txt](https://lara-script.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lara-script.gitbook.io/docs/ua/funkcional-admin-paneli/nalashtuvannya/nalashtuvannya-zovnishnogo-viglyadu/zagalni-nalashtuvannya.md).
# Загальні налаштування
### **Налаштування зовнішнього вигляду**
Ця сторінка дозволяє керувати елементами брендингу вашого сайту: завантажувати **логотип**, **фон** та **фавікон**.\
Мета — зробити сайт більш впізнаваним, зручним для користувачів і візуально привабливим.
#### **Вкладки налаштувань**
1. **Логотип -** буде відображатися в обраному типі відображення «Зображення (логотип)» і допоможе сформувати впізнаваність вашого бренду. Відображається в лівій частині хедера сайту. Використовується як основний графічний елемент сайту.
* **Вимоги до файлу:**
* Формати файлів: SVG, PNG, WEBP, JPG, JPEG
* Рекомендується: SVG для найкращої якості
* Мінімальне розширення: 120 px по висоті
* Максимальний розмір файлу: 2 МБ
* Завантажується через кнопку *«Перетягніть і відпустіть або виберіть файл»*.
2. **Фон -** буде відображатися як задній фон сторінок і допоможе створити цілісний та привабливий дизайн. Це зробить сайт візуально приємнішим і впізнаваним.
* **Вимоги до файлу:**
* Формати файлів: PNG, WEBP, JPG, JPEG, SVG, WEBM.
* Рекомендується: SVG для найкращої якості
* Мінімальне розширення: 1920×1080 px
* Максимальний розмір файлу: 10 МБ
Якщо ви оберете прозоре зображення, ви зможете налаштувати кольорове заповнення фону сайту через розділ "Палітра" в цьому меню налаштувань, у полі "Фон за замовчуванням"; детальніше про налаштування палітри кольорів дізнаєтеся в 4 розділі цієї сторінки документації.\
Окрім зображення, ви можете встановити **відео як фон** — це дозволить зробити зовнішній вигляд сайту більш динамічним і сучасним.
3. **Фавікон -** буде відображатися у вкладках браузера, у списку закладок та при додаванні сайту на головний екран телефону. Це допоможе користувачам швидко впізнавати ваш сайт серед інших вкладок браузера, у списку завдань, при збереженні сайту на головний екран телефону і зробить ваш бренд більш помітним.
* **Вимоги до файлу:**
* Формати файлів: PNG, WEBP, JPG, JPEG, SVG
* Рекомендується: SVG для найкращої якості
* Мінімальне розширення: 200×200 px
* Максимальний розмір файлу: 2 МБ
#### **Доступні дії**
* Завантажити або замінити файл через блок *Drag & Drop*.
* Зберегти зміни кнопкою **«Зберегти»**.
* У разі небажаних змін можна натиснути **«Скасувати»**.
4. **Палітра -** розділ дає можливість впливати на більшість кольорових налаштувань на сайті, де ви можете налаштувати кольорову схему сайту під стиль вашого бренду. Тут задаються основні кольори для кнопок, текстів, заголовків, повідомлень і фону. Усі зміни одразу відображаються на зовнішньому вигляді сайту, тож ви можете підібрати такі відтінки, які будуть зручні користувачам і впізнавані серед конкурентів. Нижче описані розділи, які ви можете редагувати; опис для них ви також можете знайти біля кожного з полів, навівши на "?"
**Основні кольори**
* Основний колір — головний акцент сайту. Використовується для основних кнопок, активних елементів і ключових акцентів. Наприклад, блок валют у калькуляторі обміну, лічильник перемикача активних елементів, вікно статусу оператора
* Блоки на основному кольорі — колір обведення, який відображається при наведенні на блоки у верхній частині сайту (хедері).
#### Кольори тексту
* Основний текст — Основний звичайний текст на сайті. Використовується в більшості полів, підсвітці назв розділів, переліку валют, тексті всередині розділів.
* Другорядний текст — Допоміжний текст, що використовується в підписах контактів, назвах полів для вводу, підказках введення даних при створенні ордера, допоміжна інформація в описах історії AML-перевірок.
* Текст неактивних елементів — колір для допоміжного тексту, якщо по ньому була допущена помилка. Зазвичай більш яскраво червоний, використовується для виділення тексту, що не відповідає форматам введення, наприклад — вказана сума перевищує максимальну, клієнт не вказав згоду на AML-перевірку, помилка при генерації реквізитів для оплати під час створення ордера.
* Текст верхньої частини сайту — Колір тексту, який використовується в шапці застосунку та навігаційних елементах. Застосовується до пунктів меню, інформації профілю користувача та іншого текстового вмісту, що належить до верхньої частини сайту.
* Текст футера — Колір тексту, який використовується в секції футера. Застосовується до інформації про авторські права, посилань у футері, контактних даних та інших текстових елементів у нижній частині сайту.
* Текст-підказка — сірий текст всередині полів вводу, який зникає при введенні. Наприклад — підказки до формату заповнення полів, що відображаються переважно тьмяно.
* Акцентний текст — Текст, що використовується в блоках, що закликають до дії, наприклад — кнопка “Обмін”, текст блоків груп валют, текст повідомлень, текст полів у хедер-меню, які ведуть до пунктів меню правил, текст розділу правил, на якому знаходиться клієнт, текст блоку авторизації.
* Текст сторінки - Зміна текстів, які не належать секціям або блокам на сайті. Наприклад, назви розділів, розміщених безпосередньо на фоні сайту поза іншими секціями, по суті, як текст поверх паперу (фону сайту).
#### Фонові кольори
* Фон карток/блоків — фон заливки кольору для карток, новин, маленьких блоків на сторінках, панелі авторизації або заповнення даних.
* Фон верхньої частини сайту — колір верхньої панелі сайту (хедера).
* Фон нижньої частини сайту — колір нижньої панелі сайту (футера).
* Фон полів вводу — колір фону форм, що підлягають заповненню (де вводяться дані). Наприклад, поля авторизації у особистий кабінет, поля заповнення даних при створенні ордера.
* Фон за замовчуванням — загальний фон сторінки, видно лише якщо немає фону сайту або якщо він прозорий.
#### Кольори статусів
* Зелений — підсвітка статусів про успішну подію: статус ордера “Виконано”, статус верифікації, статус AML-перевірки
* Червоний — підсвітка статусів про невдалу подію: статус ордера “Скасовано”, “Помилка”, “Відхилено”, відхилений статус верифікації, статус AML-перевірки.
* Оранжевий — підсвітка статусів із проміжним станом: статус ордера “Перевірка”, “Часткова оплата”, проміжні статуси верифікації
* Синій — створення ордера або нового елементу.
#### Колір роздільників
* Розділювачі — тонкі лінії, які відокремлюють блоки чи рядки у таблицях, списку валют, меню чи розділи у мобільному інтерфейсі.
## **Типографіка**
Цей розділ призначений для масової зміни шрифтів на сайті.\
Налаштування, виконані в цьому розділі, застосовуються до всіх стандартних текстових елементів інтерфейсу.
### Опис функціоналу
#### 1. Вибір шрифту
У верхній частині сторінки розташований випадаючий список з доступними шрифтами (наприклад: Ubuntu, Lato, Rubik та інші).
Після вибору шрифту зміни застосовуються до всіх основних текстових елементів сайту, включаючи:
* Заголовки (h1, h2, h3 тощо)
* Основний текст (body)
* Підписи
* Елементи інтерфейсу
* Кнопки
* Меню
* Форми
Праворуч відображається прев’ю (приклад відображення заголовків і тексту), що дозволяє візуально оцінити обраний шрифт до збереження.
#### 2. Кнопка «Зберегти»
Застосовує обраний шрифт до всього сайту.
Після збереження:
* шрифт оновлюється в усіх стандартних компонентах інтерфейсу;
* зміни стають видимими в публічній частині сайту.
#### 3. Кнопка «Скинути до початкових налаштувань»
Повертає системний (дефолтний Rubik) шрифт, встановлений за замовчуванням у шаблоні.
Використовується у випадку необхідності відкату змін.
#### Важливо
* Налаштування типографіки застосовується до всіх стандартних елементів сайту.
* Зміни не зачіпають блоки з кастомним HTML-кодом.
#### Призначення розділу
Розділ дозволяє централізовано керувати шрифтовим стилем сайту без необхідності редагування коду.\
Це спрощує адаптацію дизайну під бренд і забезпечує єдиний стиль оформлення.
## **Радіус заокруглення кутів**
**Shape Border Radius** - це глобальне налаштування дизайн-системи, яке дозволяє централізовано керувати радіусом скруглення кутів елементів на всьому сайті.
Функціонал працює як **коефіцієнт масштабування**, який застосовується до базового значення радіуса (наприклад, 8px).
Формула розрахунку:
```
Фінальний border-radius = Коефіцієнт × Базове значення (px)
```
Приклад:
* Коефіцієнт = 1
* Базове значення = 8px
* Результат: 1 × 8px = 8px
#### Де застосовується
Зміна коефіцієнта впливає на всі UI-елементи, які використовують системний border-radius:
* Кнопки (Buttons)
* Поля введення (Inputs)
* Випадаючі списки (Select)
* Модальні вікна
* Картки (Cards)
* Dropdown-меню
* Бейджі
* Інші компоненти дизайн-системи
#### Параметри
#### **Радіус заокруглення (коефіціент)**
Числове значення, яке множиться на базовий радіус.
* Мінімальне значення: 0 (гострі кути)
* Значення >3 створюють максимально скруглений інтерфейс
***
#### Візуальні приклади
| Коефіцієнт | Результат | Візуальний стиль |
| ---------- | --------- | ------------------------------------------- |
| 0 | 0px | Прямі кути (стриманий, корпоративний стиль) |
| 0.5 | 4px | Легке скруглення |
| 1 | 8px | Стандартний баланс |
| 2 | 16px | М’який сучасний стиль |
| 3 | 24px | Скруглений UI |
Приклад відображення коефіцієнта 0
Приклад відображення коефіцієнта 5
#### Кнопки керування
#### **Зберегти**
Зберігає встановлене значення і застосовує його до всіх елементів сайту.
#### **Скинути до початкових налаштувань**
Повертає значення до стандартного коефіцієнта (4).