Apps, web, i18n, UI, partners, payouts, backoffice, bariki, prod infra
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
zabudko-ruandClaude Opus 5.5 committed
1 parent
45d7512d2b
commit
3489e0b816
319 files changed
+45483
-121
No files matched your search
@@ -0,0 +1,95 @@
|
||||
# Новая админка Barev Club — ТЗ
|
||||
|
||||
Согласовано с владельцем 2026-10-21. Новое приложение `apps/backoffice` рядом со старой `apps/admin`;
|
||||
API и база общие. Старая админка работает, пока новая не готова. Все данные сохраняются.
|
||||
|
||||
Порядок работы: каждый этап сначала показываем на localhost, деплой — только после согласования.
|
||||
|
||||
## Роли
|
||||
|
||||
Один человек может иметь несколько ролей. Команда стартово 1–3 человека.
|
||||
|
||||
| Роль | Где работает | Что может |
|
||||
|---|---|---|
|
||||
| Суперадмин | веб-админка | всё, единственный видит деньги |
|
||||
| Поддержка | веб-админка | чат поддержки, заказы (статусы, назначение), начисление подписок |
|
||||
| Консьерж | веб-админка | чат консьержа (только подписчики) |
|
||||
| Продажник | веб-админка | своя CRM: свои заведения и агентства, свой бонус |
|
||||
| Партнёр | Telegram (рабочий бот) | как сейчас; в админке им управляет команда |
|
||||
| Исполнитель | Telegram (рабочий бот + мини-апп) | как сейчас; в админке им управляет команда |
|
||||
|
||||
Партнёры — два раздельных типа: **агентства** (приводят клиентов, дарят подписку, получают %) и
|
||||
**заведения** (кафе/рестораны с клубной картой).
|
||||
|
||||
## Общее
|
||||
|
||||
- Вход через Telegram (подтверждение в рабочем боте), без паролей.
|
||||
- Языки интерфейса: русский, английский, армянский.
|
||||
- Только светлая тема, дизайн в стиле barevclub.com (кремовый фон, малиновый акцент, пастельные
|
||||
цвета направлений, Rubik + Onest, крупные скругления).
|
||||
- Удобно и на компьютере, и на телефоне.
|
||||
- Валюта — драм (AMD).
|
||||
- Журнал действий: видно всё — кто, когда, что изменил.
|
||||
- Онлайн-платёжка ещё не выбрана — делаем абстракцию «ссылка на оплату», провайдера подключим позже.
|
||||
|
||||
## Разделы
|
||||
|
||||
### Дашборд суперадмина
|
||||
1. **Требует внимания** — неназначенные заказы, неотвеченные чаты, заявки, низкие оценки (кликабельно).
|
||||
2. **Деньги** — сегодня / неделя / месяц и сравнение с прошлым периодом; подписки vs заказы.
|
||||
3. **Подписки** — активные Barev+ / Elite, истекают за 7 дней, конверсия подарочных в платные.
|
||||
4. **Рост** — новые клиенты, источники, воронка лид → клиент → платящий.
|
||||
5. **Команда** — подключения продажников, рейтинг исполнителей, активность заведений.
|
||||
6. **Лента событий** — оплаты, подписки, действия команды.
|
||||
|
||||
### Клиенты
|
||||
- Список: подписка (тариф, до какого числа, источник), откуда пришёл, сколько денег принёс
|
||||
(подписки + заказы, вал), теги.
|
||||
- Фильтры, сохранённые сегменты, экспорт в Excel, теги, рассылки в бот по сегменту.
|
||||
- Карточка: профиль, подписки, заказы (история + создать заказ за клиента), чаты, заметки, журнал.
|
||||
- Подписка: подарить (помечается «подарок» и кто подарил), продать (ссылка на оплату или ручная
|
||||
отметка оплаты наличными/переводом), продлить, отменить, сменить тариф, вернуть деньги.
|
||||
Всегда видно, кто начислил: команда (кто именно), агентство или покупка.
|
||||
|
||||
### Чаты
|
||||
- Два раздельных канала: **поддержка** (все клиенты) и **консьерж** (только подписчики).
|
||||
- Клиент пишет и из бота, и из мини-аппа — одна переписка.
|
||||
- Файлы в обе стороны.
|
||||
- Взять диалог / передать коллеге / закрыть; шаблоны ответов; карточка клиента сбоку с действиями;
|
||||
внутренние заметки (клиент не видит).
|
||||
- Уведомления: Telegram + счётчики в админке.
|
||||
- Архитектура готова к ИИ-консьержу: автор ответа — человек или бот; человек может перехватить.
|
||||
|
||||
### Партнёры
|
||||
- **Агентства**: код, процент, клиенты, начисленные подарки, вознаграждение.
|
||||
- **Заведения**: предложения по уровням, сотрудники, сканы карты, активность.
|
||||
|
||||
### Исполнители
|
||||
- Профиль и допуск (документы, активен/заблокирован), расписание и районы, рейтинг и качество
|
||||
(оценки, жалобы, отказы), деньги и выплаты.
|
||||
- Заказы распределяются автоматически, диспетчер может переназначить вручную.
|
||||
|
||||
### CRM продажника
|
||||
- Лиды: заведения и агентства. Воронка: Новый → Контакт → Встреча → Переговоры → Подключён / Отказ
|
||||
(этапы настраивает суперадмин).
|
||||
- Задачи и напоминания (пуш в Telegram), история контактов (звонки, встречи, заметки, фото, файлы),
|
||||
карта заведений.
|
||||
- «Подключён» → партнёр и ссылка для собственника создаются в один клик.
|
||||
- Продажник видит своих лидов и свой бонус; формула бонуса настраивается гибко.
|
||||
|
||||
### Продукты
|
||||
- Услуги и цены, тарифы подписки, промокоды, релокация.
|
||||
- Каждый продукт настраивается полностью: наполнение, настройки, цена, скидки по уровню подписки.
|
||||
|
||||
### Клиентская часть (позже)
|
||||
Переделываем мини-апп и клиентский бот (лендинг не трогаем).
|
||||
|
||||
## Этапы
|
||||
|
||||
1. **Каркас + дашборд + клиенты** — вход через Telegram, роли и команда, навигация, дашборд,
|
||||
клиенты с подписками, теги, сегменты, экспорт.
|
||||
2. Чаты (поддержка + консьерж, файлы).
|
||||
3. Заказы и исполнители.
|
||||
4. Партнёры (агентства, заведения) + CRM продажника.
|
||||
5. Продукты, рассылки, журнал, настройки.
|
||||
6. Клиентская часть: мини-апп и бот.
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#F6C3D3"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#4A1028">B</text></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 623 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 623 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></svg>
|
||||
|
After Width: | Height: | Size: 491 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#F6C3D3"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#4A1028"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#4A1028"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></svg>
|
||||
|
After Width: | Height: | Size: 497 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="-1" fill="#FBF6EE">barev club</text></svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="-1" fill="#4A1028">barev club</text></svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
|
After Width: | Height: | Size: 660 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#F6C3D3"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="44" letter-spacing="1" fill="#FBF6EE">BAREV CLUB</text></svg>
|
||||
|
After Width: | Height: | Size: 696 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="44" letter-spacing="1" fill="#4A1028">BAREV CLUB</text></svg>
|
||||
|
After Width: | Height: | Size: 696 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></svg>
|
||||
|
After Width: | Height: | Size: 564 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#F6C3D3" stroke="#F6C3D3" stroke-width="4" stroke-linejoin="round"/>
|
||||
</g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 586 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 586 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#F6C3D3"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#4A1028">Բ</text></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 575 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg>
|
||||
|
After Width: | Height: | Size: 575 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></svg>
|
||||
|
After Width: | Height: | Size: 443 B |
@@ -0,0 +1,202 @@
|
||||
<!doctype html><html lang="ru"><head><meta charset="utf-8"><title>Barev Club — логотипы</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;800&family=Noto+Sans+Armenian:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body{margin:0;padding:40px;background:#FBF6EE;font-family:Rubik,system-ui;color:#1E1B1A}
|
||||
h1{margin:0 0 6px;font-size:40px;color:#4A1028} p.lead{margin:0 0 28px;color:#6b6460;max-width:70ch}
|
||||
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
|
||||
.card{background:#fff;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:16px}
|
||||
.head b{display:block;font-size:22px;color:#4A1028} .head span{font-size:14px;color:#6b6460;line-height:1.45}
|
||||
.light svg{width:100%;height:auto;max-width:440px}
|
||||
.row{display:flex;gap:12px;align-items:center}
|
||||
.dark{flex:1;background:#4A1028;border-radius:20px;padding:16px 18px} .dark svg{width:100%;height:auto}
|
||||
.sizes{display:flex;align-items:flex-end;gap:10px} .sizes>div:first-child{width:96px} .sizes svg{width:100%;height:auto;display:block}
|
||||
</style></head><body>
|
||||
<h1>Barev Club — 6 вариантов логотипа</h1>
|
||||
<p class="lead">Каждый вариант: знак + надпись, версия для тёмного фона и знак в размерах 120, 64, 32 и 16 px — последние два показывают, как он будет выглядеть во вкладке браузера и в аватарке бота.</p>
|
||||
<div class="grid">
|
||||
<section class="card">
|
||||
<div class="head"><b>1. Пузырь «B»</b><span>Клуб живёт в чате Telegram: знак — сообщение, буква B — «Barev», привет.</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#F6C3D3"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#4A1028">B</text></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M38 10H82A28 28 0 0 1 110 38V64A28 28 0 0 1 82 92H54L28 112V92A28 28 0 0 1 10 64V38A28 28 0 0 1 38 10Z" fill="#4A1028"/>
|
||||
<text x="60" y="73" text-anchor="middle" font-family="Rubik" font-weight="800" font-size="58" fill="#F6C3D3">B</text></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="head"><b>2. Дом с замочной скважиной</b><span>«Ереван — как дома. С первого дня»: дом и ключ от агентства, которое привело клиента.</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#F6C3D3"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#4A1028"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#4A1028"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M54 14.5Q60 9.5 66 14.5L104 46Q110 51 110 59V100Q110 110 100 110H20Q10 110 10 100V59Q10 51 16 46Z" fill="#4A1028"/>
|
||||
<circle cx="60" cy="62" r="13" fill="#F6C3D3"/>
|
||||
<path d="M53 68H67L71 96Q71.5 99 68.5 99H51.5Q48.5 99 49 96Z" fill="#F6C3D3"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="head"><b>3. Абрикос с галочкой</b><span>Абрикос — символ Армении, галочка — из нынешнего логотипа: «сделано, можно не волноваться».</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="-1" fill="#4A1028">barev club</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="-1" fill="#FBF6EE">barev club</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<path d="M60 26C88 26 108 46 108 72C108 96 88 112 60 112C32 112 12 96 12 72C12 46 32 26 60 26Z" fill="#F4A259"/>
|
||||
<path d="M60 28C60 18 64 10 72 6" stroke="#4A1028" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M66 18C74 6 92 4 100 10C94 22 78 26 66 18Z" fill="#A8C38A"/>
|
||||
<path d="M38 70L53 85L83 55" stroke="#4A1028" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="head"><b>4. Арарат</b><span>Две вершины, Масис и Сис, которые видно из Еревана, и солнце за ними. Знак про город и новый старт, а не про услугу.</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="44" letter-spacing="1" fill="#4A1028">BAREV CLUB</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#F6C3D3"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="44" letter-spacing="1" fill="#FBF6EE">BAREV CLUB</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="84" cy="52" r="20" fill="#B8235A"/>
|
||||
<path d="M4 104L46 34Q52 25 58 34L76 62L84 52Q88 47 92 52L116 104Q118 108 114 108H6Q2 108 4 104Z" fill="#4A1028"/>
|
||||
<path d="M38 47L46 34Q52 25 58 34L66 47L59 52L52 46L45 52Z" fill="#FBF6EE"/>
|
||||
<path d="M79 58L84 52Q88 47 92 52L97 58L91 61L88 58L84 61Z" fill="#FBF6EE"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="head"><b>5. Гранат с короной</b><span>Гранат — армянский символ изобилия; пять зубцов короны — пять языков клуба.</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#F6C3D3" stroke="#F6C3D3" stroke-width="4" stroke-linejoin="round"/>
|
||||
</g><text x="140" y="78" font-family="Rubik" font-weight="800" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<circle cx="60" cy="70" r="42" fill="#B8235A"/>
|
||||
<path d="M36 34L38 17Q39 13 42 16L48 23L57 9Q60 5 63 9L72 23L78 16Q81 13 82 17L84 34Z" fill="#4A1028" stroke="#4A1028" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="head"><b>6. Монограмма «Բ»</b><span>«Բ» — первая буква армянского «Բարև» (Barev, «привет»): имя клуба на языке города.</span></div>
|
||||
<div class="light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#4A1028">Barev Club</text></svg></div>
|
||||
<div class="row">
|
||||
<div class="dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120" width="480" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style><g>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#F6C3D3"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#4A1028">Բ</text></g><text x="140" y="78" font-family="Rubik" font-weight="700" font-size="50" letter-spacing="0" fill="#FBF6EE">Barev Club</text></svg></div>
|
||||
<div class="sizes">
|
||||
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></svg></div>
|
||||
<div style="width:64px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></svg></div>
|
||||
<div style="width:32px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></svg></div>
|
||||
<div style="width:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"><style>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700;800&family=Noto+Sans+Armenian:wght@700&display=swap");</style>
|
||||
<rect x="6" y="6" width="108" height="108" rx="34" fill="#4A1028"/>
|
||||
<text x="60" y="94" text-anchor="middle" font-family="Noto Sans Armenian" font-weight="700" font-size="92" fill="#F6C3D3">Բ</text></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</section></div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
@@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Barev — словесный знак</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,800&family=Fraunces:ital,opsz,wght,SOFT,WONK@1,9..144,900,100,1&family=Unbounded:wght@800&family=Noto+Sans+Armenian:wght@700&family=Shrikhand&family=Big+Shoulders+Display:wght@900&family=Fredoka:wght@700&family=Onest:wght@400;600&display=block" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--plum: #4A1028; --pink: #F6C3D3; --cream: #FBF6EE; --yellow: #F7DA6E;
|
||||
--green: #A8C38A; --green-ink: #1F3311; --blue: #BCD0F2; --blue-ink: #12264D; --apricot: #F3A04F;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--cream); color: var(--plum); font-family: Onest, system-ui, sans-serif; }
|
||||
main { max-width: 1240px; margin: 0 auto; padding: 40px 20px 60px; }
|
||||
h1 { font: italic 800 44px/1 Rubik, sans-serif; letter-spacing: -0.03em; margin: 0 0 6px; }
|
||||
.lede { margin: 0 0 28px; color: #6b4a57; max-width: 62ch; }
|
||||
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
|
||||
.v { background: #fff; border-radius: 28px; padding: 18px; display: grid; grid-template-columns: 1fr 1fr 160px; grid-template-rows: auto 190px auto; gap: 12px; }
|
||||
.tile span, .tile b, .avatar span, .avatar b { white-space: nowrap; }
|
||||
.v header { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
|
||||
.v header b { font-size: 20px; font-weight: 600; }
|
||||
.v header span { font-size: 14px; color: #6b4a57; }
|
||||
.tile { border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.avatar { width: 160px; height: 160px; border-radius: 50%; align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.note { grid-column: 1 / -1; font-size: 13px; color: #6b4a57; margin: -4px 4px 0; }
|
||||
|
||||
/* 1 — Rubik: слово с сайта */
|
||||
.w1 { font: italic 800 96px/0.9 Rubik; padding-right: 10px; letter-spacing: -0.055em; }
|
||||
.v1 .light { background: var(--cream); color: var(--plum); }
|
||||
.v1 .dark { background: var(--plum); color: var(--pink); }
|
||||
.v1 .avatar { background: var(--plum); color: var(--pink); font: italic 800 96px/1 Rubik; letter-spacing: -0.05em; padding-right: 6px; }
|
||||
|
||||
/* 2 — Fraunces: мягкая антиква, точка-абрикос */
|
||||
.w2 { font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 96px; line-height: 1; letter-spacing: -0.035em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
|
||||
.w2 i { font-style: normal; color: var(--apricot); }
|
||||
.v2 .light { background: var(--cream); color: var(--plum); }
|
||||
.v2 .dark { background: #2b0a18; color: var(--cream); }
|
||||
.v2 .avatar { background: var(--apricot); color: var(--plum); font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 92px; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; padding-bottom: 8px; }
|
||||
|
||||
/* 3 — Unbounded + армянское Բարև: двуязычный знак */
|
||||
.w3 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
|
||||
.w3 .lat { font: 800 66px/1 Unbounded; letter-spacing: -0.04em; }
|
||||
.w3 .arm { font: 700 32px/1 'Noto Sans Armenian'; letter-spacing: 0.02em; opacity: .75; padding-left: 3px; }
|
||||
.v3 .light { background: var(--cream); color: var(--plum); }
|
||||
.v3 .dark { background: var(--plum); color: var(--yellow); }
|
||||
.v3 .avatar { background: var(--yellow); color: var(--plum); flex-direction: column; gap: 2px; }
|
||||
.v3 .avatar .a1 { font: 800 34px/1 Unbounded; letter-spacing: -0.04em; }
|
||||
.v3 .avatar .a2 { font: 700 19px/1 'Noto Sans Armenian'; opacity: .7; }
|
||||
|
||||
/* 4 — Shrikhand: сочная наклейка с тенью */
|
||||
.w4 { font: 400 86px/1 Shrikhand; padding: 0 12px 10px 0; letter-spacing: -0.01em; color: var(--yellow); text-shadow: 4px 4px 0 var(--plum), 5px 5px 0 var(--plum); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; }
|
||||
.v4 .light { background: var(--pink); }
|
||||
.v4 .dark { background: var(--plum); }
|
||||
.v4 .dark .w4 { text-shadow: 4px 4px 0 #000, 5px 5px 0 #000; -webkit-text-stroke: 2px #2b0a18; }
|
||||
.v4 .avatar { background: var(--pink); }
|
||||
.v4 .avatar span { font: 400 78px/1 Shrikhand; color: var(--yellow); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--plum); padding: 0 6px 10px 0; }
|
||||
|
||||
/* 5 — Big Shoulders: бирка для ключей */
|
||||
.w5 { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 18px; border-radius: 999px; background: var(--green); color: var(--green-ink); }
|
||||
.w5::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 3px var(--green-ink); }
|
||||
.w5 b { font: 900 76px/0.9 'Big Shoulders Display'; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.v5 .light { background: var(--cream); }
|
||||
.v5 .dark { background: var(--plum); }
|
||||
.v5 .avatar { background: var(--green); color: var(--green-ink); }
|
||||
.v5 .avatar b { font: 900 46px/0.9 'Big Shoulders Display'; letter-spacing: 0.04em; }
|
||||
|
||||
/* 6 — Fredoka: «привет» в облачке чата */
|
||||
.w6 { position: relative; display: inline-block; padding: 8px 30px 18px; border-radius: 40px 40px 40px 10px; background: var(--blue); color: var(--blue-ink); font: 700 80px/1 Fredoka; white-space: nowrap; letter-spacing: -0.02em; }
|
||||
.w6 i { font-style: normal; display: inline-block; transform: translateY(-4px) rotate(-8deg); color: #B8235A; }
|
||||
.v6 .light { background: var(--cream); }
|
||||
.v6 .dark { background: var(--blue-ink); }
|
||||
.v6 .dark .w6 { background: var(--pink); color: var(--plum); }
|
||||
.v6 .avatar { background: var(--blue); }
|
||||
.v6 .avatar span { padding: 6px 16px 12px; border-radius: 28px 28px 28px 6px; background: #fff; color: var(--blue-ink); font: 700 42px/1 Fredoka; }
|
||||
|
||||
@media (max-width: 900px) { .v { grid-template-columns: 1fr; grid-template-rows: auto; } .tile { height: 170px; } .avatar { justify-self: center; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Barev</h1>
|
||||
<p class="lede">Шесть вариантов словесного знака. В каждом: на светлом, на тёмном и круг аватара Telegram.</p>
|
||||
<div class="grid">
|
||||
<section class="v v1">
|
||||
<header><b>1 · Rubik</b><span>слово с сайта</span></header>
|
||||
<div class="tile light"><span class="w1">Barev</span></div>
|
||||
<div class="tile dark"><span class="w1">Barev</span></div>
|
||||
<div class="avatar">B</div>
|
||||
<p class="note">Тот же жирный курсив, что огромное «Barev» на главной: сайт, бот и приложение выглядят одной семьёй.</p>
|
||||
</section>
|
||||
<section class="v v2">
|
||||
<header><b>2 · Fraunces</b><span>тёплая антиква</span></header>
|
||||
<div class="tile light"><span class="w2">Barev<i>.</i></span></div>
|
||||
<div class="tile dark"><span class="w2">Barev<i>.</i></span></div>
|
||||
<div class="avatar">B<i style="font-style:normal">.</i></div>
|
||||
<p class="note">Мягкий курсив с засечками, точка абрикосового цвета. Звучит как «здравствуйте», а не как «привет».</p>
|
||||
</section>
|
||||
<section class="v v3">
|
||||
<header><b>3 · Unbounded + Բարև</b><span>двуязычный</span></header>
|
||||
<div class="tile light"><span class="w3"><span class="lat">Barev</span><span class="arm">Բարև</span></span></div>
|
||||
<div class="tile dark"><span class="w3"><span class="lat">Barev</span><span class="arm">Բարև</span></span></div>
|
||||
<div class="avatar"><span class="a1">Barev</span><span class="a2">Բարև</span></div>
|
||||
<p class="note">Латиница и армянская запись одного слова. Сразу понятно, что клуб про Армению.</p>
|
||||
</section>
|
||||
<section class="v v4">
|
||||
<header><b>4 · Shrikhand</b><span>наклейка</span></header>
|
||||
<div class="tile light"><span class="w4">Barev</span></div>
|
||||
<div class="tile dark"><span class="w4">Barev</span></div>
|
||||
<div class="avatar"><span>B</span></div>
|
||||
<p class="note">Сочная наклейка с тенью, как магнит на холодильник. Самый заметный вариант в списке чатов.</p>
|
||||
</section>
|
||||
<section class="v v5">
|
||||
<header><b>5 · Big Shoulders</b><span>бирка для ключей</span></header>
|
||||
<div class="tile light"><span class="w5"><b>Barev</b></span></div>
|
||||
<div class="tile dark"><span class="w5"><b>Barev</b></span></div>
|
||||
<div class="avatar"><b>BAREV</b></div>
|
||||
<p class="note">Узкие буквы на бирке с дырочкой — ключи от новой квартиры. Про переезд и заселение.</p>
|
||||
</section>
|
||||
<section class="v v6">
|
||||
<header><b>6 · Fredoka</b><span>облачко чата</span></header>
|
||||
<div class="tile light"><span class="w6">barev<i>!</i></span></div>
|
||||
<div class="tile dark"><span class="w6">barev<i>!</i></span></div>
|
||||
<div class="avatar"><span>barev</span></div>
|
||||
<p class="note">Строчные буквы в облачке сообщения: клуб, который отвечает в Telegram. Самый дружелюбный.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -0,0 +1,86 @@
|
||||
<!doctype html><html><head><meta charset="utf-8"><link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,800&family=Fraunces:ital,opsz,wght,SOFT,WONK@1,9..144,900,100,1&family=Unbounded:wght@800&family=Noto+Sans+Armenian:wght@700&family=Shrikhand&family=Big+Shoulders+Display:wght@900&family=Fredoka:wght@700&family=Onest:wght@400;600&display=block" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--plum: #4A1028; --pink: #F6C3D3; --cream: #FBF6EE; --yellow: #F7DA6E;
|
||||
--green: #A8C38A; --green-ink: #1F3311; --blue: #BCD0F2; --blue-ink: #12264D; --apricot: #F3A04F;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--cream); color: var(--plum); font-family: Onest, system-ui, sans-serif; }
|
||||
main { max-width: 1240px; margin: 0 auto; padding: 40px 20px 60px; }
|
||||
h1 { font: italic 800 44px/1 Rubik, sans-serif; letter-spacing: -0.03em; margin: 0 0 6px; }
|
||||
.lede { margin: 0 0 28px; color: #6b4a57; max-width: 62ch; }
|
||||
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
|
||||
.v { background: #fff; border-radius: 28px; padding: 18px; display: grid; grid-template-columns: 1fr 1fr 160px; grid-template-rows: auto 190px auto; gap: 12px; }
|
||||
.tile span, .tile b, .avatar span, .avatar b { white-space: nowrap; }
|
||||
.v header { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
|
||||
.v header b { font-size: 20px; font-weight: 600; }
|
||||
.v header span { font-size: 14px; color: #6b4a57; }
|
||||
.tile { border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.avatar { width: 160px; height: 160px; border-radius: 50%; align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.note { grid-column: 1 / -1; font-size: 13px; color: #6b4a57; margin: -4px 4px 0; }
|
||||
|
||||
/* 1 — Rubik: слово с сайта */
|
||||
.w1 { font: italic 800 96px/0.9 Rubik; padding-right: 10px; letter-spacing: -0.055em; }
|
||||
.v1 .light { background: var(--cream); color: var(--plum); }
|
||||
.v1 .dark { background: var(--plum); color: var(--pink); }
|
||||
.v1 .avatar { background: var(--plum); color: var(--pink); font: italic 800 96px/1 Rubik; letter-spacing: -0.05em; padding-right: 6px; }
|
||||
|
||||
/* 2 — Fraunces: мягкая антиква, точка-абрикос */
|
||||
.w2 { font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 96px; line-height: 1; letter-spacing: -0.035em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
|
||||
.w2 i { font-style: normal; color: var(--apricot); }
|
||||
.v2 .light { background: var(--cream); color: var(--plum); }
|
||||
.v2 .dark { background: #2b0a18; color: var(--cream); }
|
||||
.v2 .avatar { background: var(--apricot); color: var(--plum); font-family: Fraunces; font-style: italic; font-weight: 900; font-size: 92px; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; padding-bottom: 8px; }
|
||||
|
||||
/* 3 — Unbounded + армянское Բարև: двуязычный знак */
|
||||
.w3 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
|
||||
.w3 .lat { font: 800 66px/1 Unbounded; letter-spacing: -0.04em; }
|
||||
.w3 .arm { font: 700 32px/1 'Noto Sans Armenian'; letter-spacing: 0.02em; opacity: .75; padding-left: 3px; }
|
||||
.v3 .light { background: var(--cream); color: var(--plum); }
|
||||
.v3 .dark { background: var(--plum); color: var(--yellow); }
|
||||
.v3 .avatar { background: var(--yellow); color: var(--plum); flex-direction: column; gap: 2px; }
|
||||
.v3 .avatar .a1 { font: 800 34px/1 Unbounded; letter-spacing: -0.04em; }
|
||||
.v3 .avatar .a2 { font: 700 19px/1 'Noto Sans Armenian'; opacity: .7; }
|
||||
|
||||
/* 4 — Shrikhand: сочная наклейка с тенью */
|
||||
.w4 { font: 400 86px/1 Shrikhand; padding: 0 12px 10px 0; letter-spacing: -0.01em; color: var(--yellow); text-shadow: 4px 4px 0 var(--plum), 5px 5px 0 var(--plum); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; }
|
||||
.v4 .light { background: var(--pink); }
|
||||
.v4 .dark { background: var(--plum); }
|
||||
.v4 .dark .w4 { text-shadow: 4px 4px 0 #000, 5px 5px 0 #000; -webkit-text-stroke: 2px #2b0a18; }
|
||||
.v4 .avatar { background: var(--pink); }
|
||||
.v4 .avatar span { font: 400 78px/1 Shrikhand; color: var(--yellow); -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--plum); padding: 0 6px 10px 0; }
|
||||
|
||||
/* 5 — Big Shoulders: бирка для ключей */
|
||||
.w5 { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 18px; border-radius: 999px; background: var(--green); color: var(--green-ink); }
|
||||
.w5::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 3px var(--green-ink); }
|
||||
.w5 b { font: 900 76px/0.9 'Big Shoulders Display'; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.v5 .light { background: var(--cream); }
|
||||
.v5 .dark { background: var(--plum); }
|
||||
.v5 .avatar { background: var(--green); color: var(--green-ink); }
|
||||
.v5 .avatar b { font: 900 46px/0.9 'Big Shoulders Display'; letter-spacing: 0.04em; }
|
||||
|
||||
/* 6 — Fredoka: «привет» в облачке чата */
|
||||
.w6 { position: relative; display: inline-block; padding: 8px 30px 18px; border-radius: 40px 40px 40px 10px; background: var(--blue); color: var(--blue-ink); font: 700 80px/1 Fredoka; white-space: nowrap; letter-spacing: -0.02em; }
|
||||
.w6 i { font-style: normal; display: inline-block; transform: translateY(-4px) rotate(-8deg); color: #B8235A; }
|
||||
.v6 .light { background: var(--cream); }
|
||||
.v6 .dark { background: var(--blue-ink); }
|
||||
.v6 .dark .w6 { background: var(--pink); color: var(--plum); }
|
||||
.v6 .avatar { background: var(--blue); }
|
||||
.v6 .avatar span { padding: 6px 16px 12px; border-radius: 28px 28px 28px 6px; background: #fff; color: var(--blue-ink); font: 700 42px/1 Fredoka; }
|
||||
|
||||
@media (max-width: 900px) { .v { grid-template-columns: 1fr; grid-template-rows: auto; } .tile { height: 170px; } .avatar { justify-self: center; } }
|
||||
|
||||
html,body{margin:0;width:100vw;height:100vh;overflow:hidden;background:transparent}
|
||||
#stage{width:100vw;height:100vh}
|
||||
#stage .tile{width:100%;height:100%;border-radius:0}
|
||||
#stage .avatar{width:100%;height:100%;border-radius:0}
|
||||
#stage .scale{transform:scale(var(--k));transform-origin:center}
|
||||
</style></head><body><div id="stage"></div><script>const T={"v1": ["<span class=\"w1\">Barev</span>", "<span class=\"w1\">Barev</span>", "B"], "v2": ["<span class=\"w2\">Barev<i>.</i></span>", "<span class=\"w2\">Barev<i>.</i></span>", "B<i style=\"font-style:normal\">.</i>"], "v3": ["<span class=\"w3\"><span class=\"lat\">Barev</span><span class=\"arm\">Բարև</span></span>", "<span class=\"w3\"><span class=\"lat\">Barev</span><span class=\"arm\">Բարև</span></span>", "<span class=\"a1\">Barev</span><span class=\"a2\">Բարև</span>"], "v4": ["<span class=\"w4\">Barev</span>", "<span class=\"w4\">Barev</span>", "<span>B</span>"], "v5": ["<span class=\"w5\"><b>Barev</b></span>", "<span class=\"w5\"><b>Barev</b></span>", "<b>BAREV</b>"], "v6": ["<span class=\"w6\">barev<i>!</i></span>", "<span class=\"w6\">barev<i>!</i></span>", "<span>barev</span>"]};
|
||||
const q=new URLSearchParams(location.search),v=q.get('v'),m=q.get('m'),k=q.get('k')||'2.4';
|
||||
const [l,d,a]=T['v'+v];
|
||||
const st=document.getElementById('stage');
|
||||
st.className='v'+v;st.style.setProperty('--k',k);
|
||||
st.innerHTML=m==='avatar'?`<div class="avatar"><div class="scale" style="display:flex;flex-direction:${v==="3"?"column":"row"};align-items:${v==="3"?"center":"baseline"}">${a}</div></div>`:`<div class="tile ${m}"><div class="scale">${m==='light'?l:d}</div></div>`;
|
||||
</script></body></html>
|
||||
Reference in new issue
Block a user