Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bb0800a51d | ||
|
|
1e0fb461d1 | ||
|
|
8c6b82c52a | ||
|
|
98a604f2a9 | ||
|
|
37161dcda1 | ||
|
|
cf6ef4fea1 | ||
|
|
c9a7566a84 |
No files matched your search
@@ -10,9 +10,32 @@
|
|||||||
- На десктопе отображается таблица с новыми колонками (Балл, Скрипт, Конверсия, Ср. время, Тренд).
|
- На десктопе отображается таблица с новыми колонками (Балл, Скрипт, Конверсия, Ср. время, Тренд).
|
||||||
- На мобильном (≤768px) автоматически отображаются карточки.
|
- На мобильном (≤768px) автоматически отображаются карточки.
|
||||||
- В карточках добавлены круговые диаграммы (score-ring) и блок "Слабое место" (weakness).
|
- В карточках добавлены круговые диаграммы (score-ring) и блок "Слабое место" (weakness).
|
||||||
|
- [x] Мобильный отчёт: заголовок + табы вертикально, теги звонков друг под другом.
|
||||||
|
- [x] Детали на мобильном: `details-grid` → 2 колонки (≤768px), 1 колонка (≤480px).
|
||||||
|
- [x] Заменено "Муталова Р." → "Зарипова Р." в отчёте.
|
||||||
|
- [x] Заменено "ИП Тарасов И.А." → "ИП Тарасов Н.О." (footer + privacy policy).
|
||||||
|
- [x] Удалено "Без карты" из hero-секции.
|
||||||
|
- [x] Тариф "Про" → "База", "История за 12 месяцев" → "История за 1 месяц".
|
||||||
|
- [x] Удалён тариф "Бизнес" полностью (с CSS).
|
||||||
|
- [x] Удалён мусор "rks -->" после дашборда.
|
||||||
|
- [x] Анимация карточек сотрудников ускорена (duration 0.5→0.2, delay 0.06→0.03).
|
||||||
|
- [x] **Создан логотипный набор (7 концептов):** `logos/`
|
||||||
|
- logo-01: Wordmark + Sound Wave
|
||||||
|
- logo-02: Circle Sound Wave (иконка/фавикон)
|
||||||
|
- logo-03: Phone + Wave
|
||||||
|
- logo-04: Hex Data Grid (Bauhaus) → без рамки, зелёная волна
|
||||||
|
- logo-04a: Hex-Wave + "Calls24" — Inter шрифт ★ (выбран для интеграции)
|
||||||
|
- logo-04b: Hex-Wave + "Calls24" — Manrope шрифт
|
||||||
|
- logo-05: C-Wave (Apple-like letterform)
|
||||||
|
- logo-06: Hexagon + C-Wave (красная волна)
|
||||||
|
- Все: wordmark + icon-only + чёрная версия
|
||||||
|
- Превью: `logos/preview.html`
|
||||||
|
- [x] **Логотип интегрирован в страницу:**
|
||||||
|
- Header: анимированная версия (непрерывная волна, пульсация "24", мерцающая линия)
|
||||||
|
- Footer: статичная версия (без анимации)
|
||||||
|
|
||||||
## 🚧 В процессе
|
## 🚧 В процессе
|
||||||
- Нет.
|
- Выбор логотипа → интеграция в header/footer
|
||||||
|
|
||||||
## 🛠 Инструменты
|
## 🛠 Инструменты
|
||||||
- **Git**: `/home/nik/projects/wow-design/calls24-landing/.git`
|
- **Git**: `/home/nik/projects/wow-design/calls24-landing/.git`
|
||||||
@@ -20,4 +43,8 @@
|
|||||||
- **Пресеты**: `prompts/` — адаптация, кнопки, дашборд
|
- **Пресеты**: `prompts/` — адаптация, кнопки, дашборд
|
||||||
|
|
||||||
## 📝 План изменений
|
## 📝 План изменений
|
||||||
- [ ] ...
|
- [ ] Выбрать логотип из 7 вариантов (logo-04a Inter или 04b Manrope — рекомендуемые)
|
||||||
|
- [ ] Интегрировать логотип в header (ref=e1)
|
||||||
|
- [ ] Обновить footer logo (ref=e11)
|
||||||
|
- [ ] Создать favicon (logo-04-icon-only.svg, 32px PNG)
|
||||||
|
- [ ] Добавить Google Fonts import в HTML (Inter или Manrope)
|
||||||
@@ -235,18 +235,27 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
LOGO
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
.logo {
|
.logo {
|
||||||
font-weight: 900;
|
display: inline-flex;
|
||||||
font-size: 1.375rem;
|
align-items: center;
|
||||||
letter-spacing: -0.03em;
|
gap: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-primary);
|
|
||||||
transition: opacity 0.2s var(--ease-out);
|
transition: opacity 0.2s var(--ease-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover { opacity: 0.8; }
|
.logo:hover { opacity: 0.8; }
|
||||||
|
|
||||||
.logo span { color: var(--accent); }
|
.logo svg {
|
||||||
|
height: 32px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-footer svg {
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1557,6 +1566,7 @@
|
|||||||
|
|
||||||
|
|
||||||
/* Enterprise pricing card */
|
/* Enterprise pricing card */
|
||||||
|
/* Pricing enterprise styles */
|
||||||
.pricing-card.enterprise {
|
.pricing-card.enterprise {
|
||||||
border-color: var(--accent-secondary);
|
border-color: var(--accent-secondary);
|
||||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-card) 100%);
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-card) 100%);
|
||||||
@@ -1577,13 +1587,6 @@
|
|||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-subprice {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--accent-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-card.enterprise .pricing-price {
|
.pricing-card.enterprise .pricing-price {
|
||||||
color: var(--accent-secondary);
|
color: var(--accent-secondary);
|
||||||
}
|
}
|
||||||
@@ -1593,7 +1596,7 @@
|
|||||||
color: var(--accent-secondary);
|
color: var(--accent-secondary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Report tab content */
|
/* Report tab content */
|
||||||
.report-tab-content {
|
.report-tab-content {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -1907,6 +1910,39 @@
|
|||||||
/* ═══════════════════════════════════════════
|
/* ═══════════════════════════════════════════
|
||||||
RESPONSIVE
|
RESPONSIVE
|
||||||
═══════════════════════════════════════════ */
|
═══════════════════════════════════════════ */
|
||||||
|
/* Report: standalone income block */
|
||||||
|
.report-income-block {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.report-income-card {
|
||||||
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.02));
|
||||||
|
border: 1px solid rgba(34, 197, 94, 0.25);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.report-income-label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.report-income-value {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--accent-secondary);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.report-income-note {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.report-income-card { padding: 1.5rem; }
|
||||||
|
.report-income-value { font-size: 2rem; }
|
||||||
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.nav { display: none; }
|
.nav { display: none; }
|
||||||
.hero { padding-top: 100px; }
|
.hero { padding-top: 100px; }
|
||||||
@@ -1926,11 +1962,26 @@
|
|||||||
.card-metric-value { font-size: 1rem; }
|
.card-metric-value { font-size: 1rem; }
|
||||||
.cookie-inner { flex-direction: column; text-align: center; }
|
.cookie-inner { flex-direction: column; text-align: center; }
|
||||||
.dashboard-preview, .report-preview { border-radius: var(--radius-lg); }
|
.dashboard-preview, .report-preview { border-radius: var(--radius-lg); }
|
||||||
|
/* Report mobile */
|
||||||
|
.report-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
|
||||||
|
.report-tabs { flex-wrap: wrap; }
|
||||||
|
.report-call { flex-direction: column; align-items: flex-start; }
|
||||||
|
.report-call-tags { flex-direction: column; width: 100%; margin-top: 0.5rem; }
|
||||||
|
.report-tag { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; }
|
||||||
|
/* Details mobile */
|
||||||
|
.details-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
|
||||||
|
.detail-card { padding: 0.875rem 1rem; }
|
||||||
|
.detail-label { font-size: 0.625rem; }
|
||||||
|
.detail-value { font-size: 0.8125rem; word-break: break-word; }
|
||||||
|
/* Mobile nav-cta compact */
|
||||||
|
.nav-cta { margin-left: 0; }
|
||||||
|
.nav-cta .btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: var(--radius-sm); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.numbers-grid { grid-template-columns: 1fr; }
|
.numbers-grid { grid-template-columns: 1fr; }
|
||||||
.footer-grid { grid-template-columns: 1fr; }
|
.footer-grid { grid-template-columns: 1fr; }
|
||||||
|
.details-grid { grid-template-columns: 1fr !important; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -1963,7 +2014,31 @@
|
|||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="header" role="banner">
|
<header class="header" role="banner">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
<a href="#" class="logo">calls<span>24</span></a>
|
<a href="#" class="logo">
|
||||||
|
<svg viewBox="0 0 340 56" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<style>
|
||||||
|
.wb{animation:wave 2.4s ease-in-out infinite}
|
||||||
|
.w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
|
||||||
|
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
|
||||||
|
.b24{animation:bp 2.4s ease-in-out infinite}
|
||||||
|
@keyframes bp{0%,100%{fill:#22c55e}50%{fill:#86efac}}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(3,2)">
|
||||||
|
<rect class="w1 wb" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<rect class="w2 wb" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="w3 wb" x="20" y="8" width="6" height="50" rx="3" fill="url(#lg)"/>
|
||||||
|
<rect class="w4 wb" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="w5 wb" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="44" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan class="b24" font-weight="700">24</tspan></text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<nav class="nav" aria-label="Основная навигация">
|
<nav class="nav" aria-label="Основная навигация">
|
||||||
<a href="#features">Возможности</a>
|
<a href="#features">Возможности</a>
|
||||||
<a href="#report">Отчёты</a>
|
<a href="#report">Отчёты</a>
|
||||||
@@ -1971,7 +2046,7 @@
|
|||||||
<a href="#pricing">Тарифы</a>
|
<a href="#pricing">Тарифы</a>
|
||||||
<a href="#contact">Контакты</a>
|
<a href="#contact">Контакты</a>
|
||||||
</nav>
|
</nav>
|
||||||
<a href="#audit" class="btn btn-green nav-cta">Начать бесплатно</a>
|
<a href="tel:+79177776086" class="btn btn-green nav-cta">Консультация</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -2000,7 +2075,6 @@
|
|||||||
<div class="hero-trust">
|
<div class="hero-trust">
|
||||||
<span><span class="dot"></span> Бесплатно для первого анализа</span>
|
<span><span class="dot"></span> Бесплатно для первого анализа</span>
|
||||||
<span>152-ФЗ</span>
|
<span>152-ФЗ</span>
|
||||||
<span>Без карты</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2012,7 +2086,7 @@
|
|||||||
<div class="numbers-grid">
|
<div class="numbers-grid">
|
||||||
<div class="number-item">
|
<div class="number-item">
|
||||||
<div class="number-value red">90%</div>
|
<div class="number-value red">90%</div>
|
||||||
<div class="number-label">Операторов не называют<br>компанию</div>
|
<div class="number-label">Агентов не называют<br>компанию</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="number-item">
|
<div class="number-item">
|
||||||
<div class="number-value red">85%</div>
|
<div class="number-value red">85%</div>
|
||||||
@@ -2118,7 +2192,10 @@
|
|||||||
|
|
||||||
<div class="report-preview">
|
<div class="report-preview">
|
||||||
<div class="report-header">
|
<div class="report-header">
|
||||||
<h3>📊 Отчёт по звонкам</h3>
|
<h3>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:0.5rem;flex-shrink:0"><rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" opacity="0.3"/><rect x="10" y="7" width="4" height="14" rx="1" fill="currentColor" opacity="0.5"/><rect x="17" y="3" width="4" height="18" rx="1" fill="currentColor" opacity="0.7"/></svg>
|
||||||
|
Отчёт по звонкам*
|
||||||
|
</h3>
|
||||||
<div class="report-tabs">
|
<div class="report-tabs">
|
||||||
<button class="report-tab active" data-tab="overview">Обзор</button>
|
<button class="report-tab active" data-tab="overview">Обзор</button>
|
||||||
<button class="report-tab" data-tab="details">Детали</button>
|
<button class="report-tab" data-tab="details">Детали</button>
|
||||||
@@ -2131,99 +2208,100 @@
|
|||||||
<div class="report-metrics">
|
<div class="report-metrics">
|
||||||
<div class="report-metric">
|
<div class="report-metric">
|
||||||
<div class="report-metric-label">Всего звонков</div>
|
<div class="report-metric-label">Всего звонков</div>
|
||||||
<div class="report-metric-value">99</div>
|
<div class="report-metric-value">87</div>
|
||||||
<div class="report-metric-change positive">↑ 12% vs прошлый месяц</div>
|
<div class="report-metric-change positive">↑ 8% vs прошлый месяц</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-metric">
|
<div class="report-metric">
|
||||||
<div class="report-metric-label">Средний балл</div>
|
<div class="report-metric-label">Средний балл</div>
|
||||||
<div class="report-metric-value green">6.2</div>
|
<div class="report-metric-value green">6.3</div>
|
||||||
<div class="report-metric-change positive">↑ 0.8 vs прошлый месяц</div>
|
<div class="report-metric-change positive">↑ 1.1 vs прошлый месяц</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-metric">
|
<div class="report-metric">
|
||||||
<div class="report-metric-label">Операторов</div>
|
<div class="report-metric-label">Агентов</div>
|
||||||
<div class="report-metric-value blue">12</div>
|
<div class="report-metric-value blue">8</div>
|
||||||
<div class="report-metric-change">В работе</div>
|
<div class="report-metric-change">В работе</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-metric">
|
<div class="report-metric">
|
||||||
<div class="report-metric-label">Потенциал сделок</div>
|
<div class="report-metric-label">Сделки в работе</div>
|
||||||
<div class="report-metric-value green">~45</div>
|
<div class="report-metric-value green">~32</div>
|
||||||
<div class="report-metric-change negative">↓ 40% потеряно</div>
|
<div class="report-metric-change negative">↓ 35% потеряно</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-chart">
|
<div class="report-chart">
|
||||||
<h3 style="font-size:0.875rem;font-weight:600;margin-bottom:1.25rem;">Ошибки по категориям</h3>
|
<h3 style="font-size:0.875rem;font-weight:600;margin-bottom:1.25rem;">Ошибки по скрипту</h3>
|
||||||
<div class="chart-bar-container">
|
<div class="chart-bar-container">
|
||||||
<span class="chart-bar-label">Не представились</span>
|
<span class="chart-bar-label">Не представились</span>
|
||||||
<div class="chart-bar-track">
|
<div class="chart-bar-track">
|
||||||
<div class="chart-bar red" style="width:90%;"></div>
|
<div class="chart-bar red" style="width:88%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="chart-bar-value">90%</span>
|
<span class="chart-bar-value">88%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-bar-container">
|
<div class="chart-bar-container">
|
||||||
<span class="chart-bar-label">Не назвали компанию</span>
|
<span class="chart-bar-label">Не назвали агентство</span>
|
||||||
<div class="chart-bar-track">
|
<div class="chart-bar-track">
|
||||||
<div class="chart-bar red" style="width:90%;"></div>
|
<div class="chart-bar red" style="width:82%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="chart-bar-value">90%</span>
|
<span class="chart-bar-value">82%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-bar-container">
|
<div class="chart-bar-container">
|
||||||
<span class="chart-bar-label">Не обсудили бюджет</span>
|
<span class="chart-bar-label">Не выяснили задачу</span>
|
||||||
<div class="chart-bar-track">
|
<div class="chart-bar-track">
|
||||||
<div class="chart-bar red" style="width:85%;"></div>
|
<div class="chart-bar red" style="width:75%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="chart-bar-value">85%</span>
|
<span class="chart-bar-value">75%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-bar-container">
|
<div class="chart-bar-container">
|
||||||
<span class="chart-bar-label">Не задали вопросы</span>
|
<span class="chart-bar-label">Не задали вопросы</span>
|
||||||
<div class="chart-bar-track">
|
<div class="chart-bar-track">
|
||||||
<div class="chart-bar yellow" style="width:78%;"></div>
|
<div class="chart-bar yellow" style="width:68%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="chart-bar-value">78%</span>
|
<span class="chart-bar-value">68%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-bar-container">
|
<div class="chart-bar-container">
|
||||||
<span class="chart-bar-label">Не спросили имя</span>
|
<span class="chart-bar-label">Не уточнили бюджет</span>
|
||||||
<div class="chart-bar-track">
|
<div class="chart-bar-track">
|
||||||
<div class="chart-bar yellow" style="width:80%;"></div>
|
<div class="chart-bar yellow" style="width:70%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="chart-bar-value">80%</span>
|
<span class="chart-bar-value">70%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call-list">
|
<div class="report-call-list">
|
||||||
<h3>Последние звонки</h3>
|
<h3>Последние звонки</h3>
|
||||||
<div class="report-call">
|
<div class="report-call">
|
||||||
<div class="report-call-score high">8.0</div>
|
<div class="report-call-score high">8.2</div>
|
||||||
<div class="report-call-info">
|
<div class="report-call-info">
|
||||||
<div class="report-call-number">Муталова Р. — 15:32</div>
|
<div class="report-call-number">Смирнов А.Н. — 14:22</div>
|
||||||
<div class="report-call-meta">Длительность: 4 мин 12 сек · 15.06.2025</div>
|
<div class="report-call-meta">Длительность: 6 мин 45 сек · 18.06.2025</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call-tags">
|
<div class="report-call-tags">
|
||||||
<span class="report-tag pass">Приветствие ✓</span>
|
<span class="report-tag pass">Приветствие ✓</span>
|
||||||
|
<span class="report-tag pass">Задача ✓</span>
|
||||||
<span class="report-tag pass">Бюджет ✓</span>
|
<span class="report-tag pass">Бюджет ✓</span>
|
||||||
<span class="report-tag fail">Имя ✗</span>
|
<span class="report-tag fail">Ипотека ✗</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call">
|
<div class="report-call">
|
||||||
<div class="report-call-score low">1.5</div>
|
<div class="report-call-score low">2.1</div>
|
||||||
<div class="report-call-info">
|
<div class="report-call-info">
|
||||||
<div class="report-call-number">Иванов С. — 14:15</div>
|
<div class="report-call-number">Орлов Д.С. — 13:08</div>
|
||||||
<div class="report-call-meta">Длительность: 1 мин 47 сек · 15.06.2025</div>
|
<div class="report-call-meta">Длительность: 1 мин 12 сек · 18.06.2025</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call-tags">
|
<div class="report-call-tags">
|
||||||
<span class="report-tag fail">Приветствие ✗</span>
|
<span class="report-tag fail">Приветствие ✗</span>
|
||||||
<span class="report-tag fail">Бюджет ✗</span>
|
<span class="report-tag fail">Задача ✗</span>
|
||||||
<span class="report-tag fail">Контакт ✗</span>
|
<span class="report-tag fail">Контакт ✗</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call">
|
<div class="report-call">
|
||||||
<div class="report-call-score medium">5.0</div>
|
<div class="report-call-score medium">5.5</div>
|
||||||
<div class="report-call-info">
|
<div class="report-call-info">
|
||||||
<div class="report-call-number">Петрова А. — 13:45</div>
|
<div class="report-call-number">Белова Е.А. — 11:33</div>
|
||||||
<div class="report-call-meta">Длительность: 3 мин 28 сек · 14.06.2025</div>
|
<div class="report-call-meta">Длительность: 3 мин 48 сек · 17.06.2025</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="report-call-tags">
|
<div class="report-call-tags">
|
||||||
<span class="report-tag pass">Приветствие ✓</span>
|
<span class="report-tag pass">Приветствие ✓</span>
|
||||||
<span class="report-tag fail">Бюджет ✗</span>
|
<span class="report-tag fail">Задача ✗</span>
|
||||||
<span class="report-tag pass">Имя ✓</span>
|
<span class="report-tag pass">Бюджет ✓</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2234,11 +2312,11 @@
|
|||||||
<div class="details-grid">
|
<div class="details-grid">
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<div class="detail-label">Агентство</div>
|
<div class="detail-label">Агентство</div>
|
||||||
<div class="detail-value">Недвижимость Плюс</div>
|
<div class="detail-value">ГК Простор</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<div class="detail-label">Период</div>
|
<div class="detail-label">Период</div>
|
||||||
<div class="detail-value">01.06 — 15.06.2025</div>
|
<div class="detail-value">01.06 — 18.06.2025</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<div class="detail-label">Источник</div>
|
<div class="detail-label">Источник</div>
|
||||||
@@ -2246,65 +2324,72 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<div class="detail-label">Обработано</div>
|
<div class="detail-label">Обработано</div>
|
||||||
<div class="detail-value">99 звонков · 87 329 символов</div>
|
<div class="detail-value">87 звонков · 76 542 символов</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Детализация по операторам</h3>
|
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Детализация по агентам</h3>
|
||||||
<div class="operator-detail">
|
<div class="operator-detail">
|
||||||
<div class="operator-detail-row">
|
<div class="operator-detail-row">
|
||||||
<span>Муталова Р.</span>
|
<span>Смирнов А.Н.</span>
|
||||||
<div class="operator-detail-bar">
|
<div class="operator-detail-bar">
|
||||||
<div class="operator-detail-fill" style="width:95%;background:var(--accent-secondary)"></div>
|
<div class="operator-detail-fill" style="width:92%;background:var(--accent-secondary)"></div>
|
||||||
</div>
|
</div>
|
||||||
<span>8.0/10</span>
|
<span>7.8/10</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="operator-detail-row">
|
<div class="operator-detail-row">
|
||||||
<span>Сидоров К.В.</span>
|
<span>Орлова И.В.</span>
|
||||||
<div class="operator-detail-bar">
|
<div class="operator-detail-bar">
|
||||||
<div class="operator-detail-fill" style="width:82%;background:var(--accent-secondary)"></div>
|
<div class="operator-detail-fill" style="width:85%;background:var(--accent-secondary)"></div>
|
||||||
</div>
|
</div>
|
||||||
<span>6.8/10</span>
|
<span>6.8/10</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="operator-detail-row">
|
<div class="operator-detail-row">
|
||||||
<span>Петрова А.</span>
|
<span>Белова Е.А.</span>
|
||||||
<div class="operator-detail-bar">
|
<div class="operator-detail-bar">
|
||||||
<div class="operator-detail-fill" style="width:62%;background:var(--warning)"></div>
|
<div class="operator-detail-fill" style="width:68%;background:var(--warning)"></div>
|
||||||
</div>
|
</div>
|
||||||
<span>5.2/10</span>
|
<span>5.4/10</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="operator-detail-row">
|
<div class="operator-detail-row">
|
||||||
<span>Иванов С.</span>
|
<span>Кузнецов И.А.</span>
|
||||||
<div class="operator-detail-bar">
|
<div class="operator-detail-bar">
|
||||||
<div class="operator-detail-fill" style="width:18%;background:var(--error)"></div>
|
<div class="operator-detail-fill" style="width:55%;background:var(--warning)"></div>
|
||||||
</div>
|
</div>
|
||||||
<span>1.5/10</span>
|
<span>4.6/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="operator-detail-row">
|
||||||
|
<span>Орлов Д.С.</span>
|
||||||
|
<div class="operator-detail-bar">
|
||||||
|
<div class="operator-detail-fill" style="width:28%;background:var(--error)"></div>
|
||||||
|
</div>
|
||||||
|
<span>2.1/10</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Скрипты клиентов</h3>
|
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Фразы клиентов</h3>
|
||||||
<div class="script-list">
|
<div class="script-list">
|
||||||
<div class="script-item">
|
<div class="script-item">
|
||||||
<div class="script-item-header">
|
<div class="script-item-header">
|
||||||
<strong>«Подскажите, а вы работаете с ипотекой?»</strong>
|
<strong>«Подскажите, а вы работаете с ипотекой и материнским капиталом?»</strong>
|
||||||
<span class="script-item-badge">Высокий интерес</span>
|
<span class="script-item-badge">Высокий интерес</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Встречается в 34% звонков. Клиент готов к обсуждению условий</p>
|
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Встречается в 42% звонков. Клиент готов к обсуждению условий финансирования</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="script-item">
|
<div class="script-item">
|
||||||
<div class="script-item-header">
|
<div class="script-item-header">
|
||||||
<strong>«Нужна квартира в центре, до 15 млн»</strong>
|
<strong>«Нужна двухкомнатная в новостройке, до 12 млн, рядом метро»</strong>
|
||||||
<span class="script-item-badge" style="background:rgba(34,197,94,0.15);color:var(--accent-secondary)">Горячий лид</span>
|
<span class="script-item-badge" style="background:rgba(34,197,94,0.15);color:var(--accent-secondary)">Горячий лид</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Чёткий бюджет и требования — 22% звонков</p>
|
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Чёткий бюджет, тип и требования — 28% звонков</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="script-item">
|
<div class="script-item">
|
||||||
<div class="script-item-header">
|
<div class="script-item-header">
|
||||||
<strong>«Просто посмотрю, пока»</strong>
|
<strong>«Я просто смотрю, пока не хочу ничего покупать»</strong>
|
||||||
<span class="script-item-badge" style="background:rgba(239,68,68,0.15);color:var(--error)">Холодный</span>
|
<span class="script-item-badge" style="background:rgba(239,68,68,0.15);color:var(--error)">Холодный</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Клиент не готов к разговору — 44% звонков</p>
|
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Клиент на этапе изучения — 38% звонков</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2316,44 +2401,59 @@
|
|||||||
<div class="recommendation-item">
|
<div class="recommendation-item">
|
||||||
<div class="recommendation-priority high">Высокий</div>
|
<div class="recommendation-priority high">Высокий</div>
|
||||||
<div class="recommendation-content">
|
<div class="recommendation-content">
|
||||||
<strong>90% операторов не называют компанию</strong>
|
<strong>88% агентов не называют агентство при звонке</strong>
|
||||||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Это первая критическая ошибка. Добавьте скрипт приветствия с названием компании. Ожидаемый рост конверсии: +15-20%</p>
|
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Критическая ошибка. Внедрите скрипт: «Агентство Простор, [Имя], добрый день». Ожидаемый рост доверия и конверсии: +18-25%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommendation-item">
|
<div class="recommendation-item">
|
||||||
<div class="recommendation-priority high">Высокий</div>
|
<div class="recommendation-priority high">Высокий</div>
|
||||||
<div class="recommendation-content">
|
<div class="recommendation-content">
|
||||||
<strong>85% не обсуждают бюджет</strong>
|
<strong>75% не выясняют задачу клиента</strong>
|
||||||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Операторы боятся спрашивать о бюджете. Внедрите вопрос «Какой диапазон бюджета вы рассматриваете?» после описания проблемы клиента</p>
|
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Агенты сразу переходят к презентации объекта. Задайте вопрос «Что для вас важно в первую очередь?» перед описанием объектов</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommendation-item">
|
<div class="recommendation-item">
|
||||||
<div class="recommendation-priority medium">Средний</div>
|
<div class="recommendation-priority medium">Средний</div>
|
||||||
<div class="recommendation-content">
|
<div class="recommendation-content">
|
||||||
<strong>80% не спрашивают имя клиента</strong>
|
<strong>70% не уточняют бюджет</strong>
|
||||||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Персонализация повышает доверие. Добавьте вопрос «Как к вам обращаться?» после первого представления</p>
|
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Без понимания бюджета агенты тратят время на нерелевантные варианты. Добавьте вопрос «Какой бюджет вы планируете?» на 3-й минуте разговора</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommendation-item">
|
<div class="recommendation-item">
|
||||||
<div class="recommendation-priority medium">Средний</div>
|
<div class="recommendation-priority medium">Средний</div>
|
||||||
<div class="recommendation-content">
|
<div class="recommendation-content">
|
||||||
<strong>78% не задают уточняющие вопросы</strong>
|
<strong>68% не задают уточняющие вопросы</strong>
|
||||||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Обучите операторов технике «3 вопроса» — задайте минимум 3 уточняющих вопроса перед предложением</p>
|
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Обучите агентов технике «3 вопроса» — уточните район, количество комнат и сроки покупки до презентации</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommendation-item">
|
<div class="recommendation-item">
|
||||||
<div class="recommendation-priority low">Низкий</div>
|
<div class="recommendation-priority low">Низкий</div>
|
||||||
<div class="recommendation-content">
|
<div class="recommendation-content">
|
||||||
<strong>Петрова А. — зона внимания</strong>
|
<strong>Белова Е.А. и Кузнецов И.А. — зона внимания</strong>
|
||||||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Средний балл 5.2. Рекомендуется прослушать 10 звонков и провести индивидуальный разбор с менеджером</p>
|
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Средние баллы 5.4 и 4.6. Рекомендуется прослушать 10 звонков, отработать скрипты выяснения задачи и бюджета</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommendation-summary">
|
<div class="recommendation-summary">
|
||||||
<div class="summary-value">~180 000 ₽</div>
|
<div class="summary-value">~1 800 000 ₽</div>
|
||||||
<div class="summary-label">Потенциальный доп. доход при исправлении всех ошибок</div>
|
<div class="summary-label">Потенциальный доп. доход при исправлении всех ошибок</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Income Block: standalone -->
|
||||||
|
<div class="report-income-block">
|
||||||
|
<div class="report-income-card">
|
||||||
|
<div class="report-income-label">Потенциальный доп. доход</div>
|
||||||
|
<div class="report-income-value">~1 800 000 ₽</div>
|
||||||
|
<div class="report-income-note">при исправлении всех ошибок</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p style="text-align:center;font-size:0.75rem;color:var(--text-secondary);margin-top:1.5rem;opacity:0.7;">
|
||||||
|
* Отчёт основан на реальном анализе звонков для компании в сфере недвижимости. Название компании и имена изменены.
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -2369,7 +2469,7 @@
|
|||||||
<div class="section-label">Дашборд по сотрудникам</div>
|
<div class="section-label">Дашборд по сотрудникам</div>
|
||||||
<h2>Видьте кто продаёт, а кто сливает</h2>
|
<h2>Видьте кто продаёт, а кто сливает</h2>
|
||||||
<p>
|
<p>
|
||||||
Рейтинг операторов, конкретные ошибки каждого,
|
Рейтинг агентов, конкретные ошибки каждого,
|
||||||
рекомендации по обучению.
|
рекомендации по обучению.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -2380,7 +2480,7 @@
|
|||||||
<!-- TABLE VIEW -->
|
<!-- TABLE VIEW -->
|
||||||
<div class="employee-list employee-table-view">
|
<div class="employee-list employee-table-view">
|
||||||
<div class="employee-row header">
|
<div class="employee-row header">
|
||||||
<span>Сотрудник</span>
|
<span>Агент</span>
|
||||||
<span>Звонки</span>
|
<span>Звонки</span>
|
||||||
<span>Балл</span>
|
<span>Балл</span>
|
||||||
<span>Скрипт</span>
|
<span>Скрипт</span>
|
||||||
@@ -2388,13 +2488,13 @@
|
|||||||
<span>Ср. время</span>
|
<span>Ср. время</span>
|
||||||
<span>Тренд</span>
|
<span>Тренд</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Зарипова Р. — топ -->
|
<!-- Смирнов А.Н. — топ -->
|
||||||
<div class="employee-row rank-1">
|
<div class="employee-row rank-1">
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av2">РМ</div>
|
<div class="employee-avatar av2">СА</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Зарипова Р.</span>
|
<span class="employee-name-text">Смирнов А.Н.</span>
|
||||||
<div class="employee-role">Старший оператор</div>
|
<div class="employee-role">Ведущий агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="employee-stat">47</span>
|
<span class="employee-stat">47</span>
|
||||||
@@ -2413,13 +2513,13 @@
|
|||||||
+0.8
|
+0.8
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Петрова А. -->
|
<!-- Белова Е.А. -->
|
||||||
<div class="employee-row rank-2">
|
<div class="employee-row rank-2">
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av1">АП</div>
|
<div class="employee-avatar av3">БЕ</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Петрова А.</span>
|
<span class="employee-name-text">Белова Е.А.</span>
|
||||||
<div class="employee-role">Оператор</div>
|
<div class="employee-role">Агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="employee-stat">38</span>
|
<span class="employee-stat">38</span>
|
||||||
@@ -2438,13 +2538,13 @@
|
|||||||
-0.3
|
-0.3
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Козлов Д. -->
|
<!-- Орлов Д.С. -->
|
||||||
<div class="employee-row rank-3">
|
<div class="employee-row rank-3">
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av3">ДК</div>
|
<div class="employee-avatar av3">ОД</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Козлов Д.</span>
|
<span class="employee-name-text">Орлов Д.С.</span>
|
||||||
<div class="employee-role">Оператор</div>
|
<div class="employee-role">Агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="employee-stat">52</span>
|
<span class="employee-stat">52</span>
|
||||||
@@ -2463,12 +2563,12 @@
|
|||||||
+0.4
|
+0.4
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Сидорова Е. -->
|
<!-- Орлова И.В. -->
|
||||||
<div class="employee-row rank-4">
|
<div class="employee-row rank-4">
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av5">ЕС</div>
|
<div class="employee-avatar av1">ОИ</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Сидорова Е.</span>
|
<span class="employee-name-text">Орлова И.В.</span>
|
||||||
<div class="employee-role">Младший оператор</div>
|
<div class="employee-role">Младший оператор</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2488,13 +2588,13 @@
|
|||||||
+1.2
|
+1.2
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Иванов С. — худший -->
|
<!-- Кузнецов И.А. — худший -->
|
||||||
<div class="employee-row rank-5">
|
<div class="employee-row rank-5">
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av4">СИ</div>
|
<div class="employee-avatar av5">КИ</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Иванов С.</span>
|
<span class="employee-name-text">Кузнецов И.А.</span>
|
||||||
<div class="employee-role">Младший оператор</div>
|
<div class="employee-role">Младший агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="employee-stat">29</span>
|
<span class="employee-stat">29</span>
|
||||||
@@ -2521,10 +2621,10 @@
|
|||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-rank-badge">1</div>
|
<div class="card-rank-badge">1</div>
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av2">РМ</div>
|
<div class="employee-avatar av2">СА</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Зарипова Р.</span>
|
<span class="employee-name-text">Смирнов А.Н.</span>
|
||||||
<div class="employee-role">Старший оператор</div>
|
<div class="employee-role">Ведущий агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-trend card-trend-up">+0.8</span>
|
<span class="card-trend card-trend-up">+0.8</span>
|
||||||
@@ -2561,8 +2661,8 @@
|
|||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av1">АП</div>
|
<div class="employee-avatar av1">АП</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Петрова А.</span>
|
<span class="employee-name-text">Белова Е.А.</span>
|
||||||
<div class="employee-role">Оператор</div>
|
<div class="employee-role">Агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-trend card-trend-down">-0.3</span>
|
<span class="card-trend card-trend-down">-0.3</span>
|
||||||
@@ -2599,8 +2699,8 @@
|
|||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av3">ДК</div>
|
<div class="employee-avatar av3">ДК</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Козлов Д.</span>
|
<span class="employee-name-text">Орлов Д.С.</span>
|
||||||
<div class="employee-role">Оператор</div>
|
<div class="employee-role">Агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-trend card-trend-up">+0.4</span>
|
<span class="card-trend card-trend-up">+0.4</span>
|
||||||
@@ -2637,7 +2737,7 @@
|
|||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av5">ЕС</div>
|
<div class="employee-avatar av5">ЕС</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Сидорова Е.</span>
|
<span class="employee-name-text">Орлова И.В.</span>
|
||||||
<div class="employee-role">Младший оператор</div>
|
<div class="employee-role">Младший оператор</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2673,10 +2773,10 @@
|
|||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-rank-badge">5</div>
|
<div class="card-rank-badge">5</div>
|
||||||
<div class="employee-name">
|
<div class="employee-name">
|
||||||
<div class="employee-avatar av4">СИ</div>
|
<div class="employee-avatar av5">КИ</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="employee-name-text">Иванов С.</span>
|
<span class="employee-name-text">Кузнецов И.А.</span>
|
||||||
<div class="employee-role">Младший оператор</div>
|
<div class="employee-role">Младший агент</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-trend card-trend-down">-0.5</span>
|
<span class="card-trend card-trend-down">-0.5</span>
|
||||||
@@ -2703,18 +2803,54 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-weakness">
|
<div class="card-weakness">
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||||
<span>Не представляет компанию</span>
|
<span>Долгие паузы в разговоре</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="employee-card rank-5">
|
||||||
</div>
|
<div class="card-header">
|
||||||
</div>
|
<div class="card-rank-badge">5</div>
|
||||||
</div>
|
<div class="employee-name">
|
||||||
</div>
|
<div class="employee-avatar av5">ОД</div>
|
||||||
</section>
|
<div>
|
||||||
|
<span class="employee-name-text">Орлов Д.С.</span>
|
||||||
|
<div class="employee-role">Младший агент</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="card-trend card-trend-down">-0.5</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-score-ring">
|
||||||
|
<svg viewBox="0 0 120 120">
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--error)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="259" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||||||
|
</svg>
|
||||||
|
<span class="card-score-value">2.1</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-metrics">
|
||||||
|
<div class="card-metric">
|
||||||
|
<span class="card-metric-value">33</span>
|
||||||
|
<span class="card-metric-label">Звонки</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-metric">
|
||||||
|
<span class="card-metric-value">28%</span>
|
||||||
|
<span class="card-metric-label">Скрипт</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-metric">
|
||||||
|
<span class="card-metric-value">4.2%</span>
|
||||||
|
<span class="card-metric-label">Конв.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-weakness">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||||
|
<span>Не представляет агентство</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
rks -->
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
@@ -2764,14 +2900,14 @@ rks -->
|
|||||||
</div>
|
</div>
|
||||||
<div class="pricing-card featured">
|
<div class="pricing-card featured">
|
||||||
<div class="pricing-label-popular">Популярный</div>
|
<div class="pricing-label-popular">Популярный</div>
|
||||||
<div class="pricing-name">Про</div>
|
<div class="pricing-name">База</div>
|
||||||
<div class="pricing-desc">Для растущих команд</div>
|
<div class="pricing-desc">Для растущих команд</div>
|
||||||
<div class="pricing-price">4 999 ₽ <span>/мес</span></div>
|
<div class="pricing-price">4 999 ₽ <span>/мес</span></div>
|
||||||
<ul class="pricing-features">
|
<ul class="pricing-features">
|
||||||
<li>Неограниченные звонки</li>
|
<li>Неограниченные звонки</li>
|
||||||
<li>Полный отчёт + рекомендации</li>
|
<li>Полный отчёт + рекомендации</li>
|
||||||
<li>Дашборд сотрудников</li>
|
<li>Дашборд сотрудников</li>
|
||||||
<li>История за 12 месяцев</li>
|
<li>История за 1 месяц</li>
|
||||||
<li>Email-поддержка</li>
|
<li>Email-поддержка</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="#audit" class="btn btn-green" style="width:100%;justify-content:center;">Начать бесплатно</a>
|
<a href="#audit" class="btn btn-green" style="width:100%;justify-content:center;">Начать бесплатно</a>
|
||||||
@@ -2781,9 +2917,8 @@ rks -->
|
|||||||
<div class="pricing-name">Бизнес</div>
|
<div class="pricing-name">Бизнес</div>
|
||||||
<div class="pricing-desc">Для компаний с высокими требованиями</div>
|
<div class="pricing-desc">Для компаний с высокими требованиями</div>
|
||||||
<div class="pricing-price">от 30 000 ₽</div>
|
<div class="pricing-price">от 30 000 ₽</div>
|
||||||
<div class="pricing-subprice">первый месяц — бесплатно</div>
|
|
||||||
<ul class="pricing-features">
|
<ul class="pricing-features">
|
||||||
<li>Всё из тарифа «Про»</li>
|
<li>Всё из тарифа «База»</li>
|
||||||
<li>Интеграция с вашей CRM (Bitrix24, amoCRM, etc.)</li>
|
<li>Интеграция с вашей CRM (Bitrix24, amoCRM, etc.)</li>
|
||||||
<li>Доработка под задачи вашего бизнеса</li>
|
<li>Доработка под задачи вашего бизнеса</li>
|
||||||
<li>Кастомные метрики и KPI</li>
|
<li>Кастомные метрики и KPI</li>
|
||||||
@@ -2818,7 +2953,24 @@ rks -->
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="footer-grid">
|
<div class="footer-grid">
|
||||||
<div class="footer-brand">
|
<div class="footer-brand">
|
||||||
<a href="#" class="logo" style="font-size:1.25rem;">calls<span>24</span></a>
|
<a href="#" class="logo logo-footer">
|
||||||
|
<svg viewBox="0 0 340 56" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="lg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(3,2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#lg2)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="44" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<p>Анализ звонков для любого бизнеса. Узнайте, где теряете клиентов — за 24 часа.</p>
|
<p>Анализ звонков для любого бизнеса. Узнайте, где теряете клиентов — за 24 часа.</p>
|
||||||
<div style="margin-top:1.5rem;">
|
<div style="margin-top:1.5rem;">
|
||||||
<a href="https://t.me/n1kt4r" class="btn btn-green" target="_blank" rel="noopener" style="font-size:0.8125rem;">Написать в Telegram</a>
|
<a href="https://t.me/n1kt4r" class="btn btn-green" target="_blank" rel="noopener" style="font-size:0.8125rem;">Написать в Telegram</a>
|
||||||
@@ -2862,11 +3014,11 @@ rks -->
|
|||||||
|
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<div class="footer-legal">
|
<div class="footer-legal">
|
||||||
<strong>ИП Тарасов И.А.</strong> · ИНН 164409454858 · ОГРНИП 325046600060241<br>
|
<strong>ИП Тарасов Н.О.</strong> · ИНН 164409454858 · ОГРНИП 325046600060241<br>
|
||||||
450000, Республика Башкортостан, г. Уфа<br>
|
450000, Республика Башкортостан, г. Уфа<br>
|
||||||
<a href="#" id="privacy-link-footer">Политика конфиденциальности</a>
|
<a href="#" id="privacy-link-footer">Политика конфиденциальности</a>
|
||||||
</div>
|
</div>
|
||||||
<span>© 2026 calls24 · ИП Тарасов И.А. Все права защищены.</span>
|
<span>© 2026 calls24 · ИП Тарасов Н.О. Все права защищены.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -2892,22 +3044,22 @@ rks -->
|
|||||||
<h2>Политика конфиденциальности</h2>
|
<h2>Политика конфиденциальности</h2>
|
||||||
|
|
||||||
<h3>1. Общие положения</h3>
|
<h3>1. Общие положения</h3>
|
||||||
<p>Настоящая Политика конфиденциальности действует в отношении персональных данных пользователя, которые ИП Тарасов И.А. (далее — «Оператор») может получить от пользователя во время использования сайта calls24.</p>
|
<p>Настоящая Политика конфиденциальности действует в отношении персональных данных пользователя, которые ИП Тарасов Н.О. (далее — «Агент») может получить от пользователя во время использования сайта calls24.</p>
|
||||||
|
|
||||||
<h3>2. Персональные данные</h3>
|
<h3>2. Персональные данные</h3>
|
||||||
<p>Оператор собирает и хранит следующие персональные данные пользователя: имя, адрес электронной почты, номер телефона, записи телефонных разговоров. Все данные обрабатываются в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
|
<p>Агент собирает и хранит следующие персональные данные пользователя: имя, адрес электронной почты, номер телефона, записи телефонных разговоров. Все данные обрабатываются в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
|
||||||
|
|
||||||
<h3>3. Цели обработки</h3>
|
<h3>3. Цели обработки</h3>
|
||||||
<p>Персональные данные используются исключительно для предоставления услуг по анализу звонков, связи с клиентом, улучшения качества сервиса. Оператор не передаёт персональные данные третьим лицам, кроме случаев, предусмотренных законодательством РФ.</p>
|
<p>Персональные данные используются исключительно для предоставления услуг по анализу звонков, связи с клиентом, улучшения качества сервиса. Агент не передаёт персональные данные третьим лицам, кроме случаев, предусмотренных законодательством РФ.</p>
|
||||||
|
|
||||||
<h3>4. Файлы cookie</h3>
|
<h3>4. Файлы cookie</h3>
|
||||||
<p>Сайт использует файлы cookie для обеспечения корректной работы, аналитики и персонализации контента. Пользователь может отключить использование cookie в настройках своего браузера.</p>
|
<p>Сайт использует файлы cookie для обеспечения корректной работы, аналитики и персонализации контента. Пользователь может отключить использование cookie в настройках своего браузера.</p>
|
||||||
|
|
||||||
<h3>5. Защита данных</h3>
|
<h3>5. Защита данных</h3>
|
||||||
<p>Оператор принимает необходимые организационные и технические меры для защиты персональных данных пользователя от неправомерного доступа, изменения, раскрытия или уничтожения.</p>
|
<p>Агент принимает необходимые организационные и технические меры для защиты персональных данных пользователя от неправомерного доступа, изменения, раскрытия или уничтожения.</p>
|
||||||
|
|
||||||
<h3>6. Контактные данные</h3>
|
<h3>6. Контактные данные</h3>
|
||||||
<p>ИП Тарасов И.А.<br>
|
<p>ИП Тарасов Н.О.<br>
|
||||||
ИНН 164409454858<br>
|
ИНН 164409454858<br>
|
||||||
ОГРНИП 325046600060241<br>
|
ОГРНИП 325046600060241<br>
|
||||||
Telegram: <a href="https://t.me/n1kt4r" style="color:var(--accent);">@n1kt4r</a><br>
|
Telegram: <a href="https://t.me/n1kt4r" style="color:var(--accent);">@n1kt4r</a><br>
|
||||||
@@ -3125,8 +3277,8 @@ rks -->
|
|||||||
},
|
},
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
x: i % 2 === 0 ? -20 : 20,
|
x: i % 2 === 0 ? -20 : 20,
|
||||||
duration: 0.5,
|
duration: 0.2,
|
||||||
delay: i * 0.06,
|
delay: i * 0.03,
|
||||||
ease: 'power2.out'
|
ease: 'power2.out'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -0,0 +1,102 @@
|
|||||||
|
# calls24 — Logo Set
|
||||||
|
|
||||||
|
**Дата:** 19.06.2026
|
||||||
|
**Стек:** Pure SVG, без внешних зависимостей, полностью self-hosted
|
||||||
|
|
||||||
|
## Файлы
|
||||||
|
|
||||||
|
```
|
||||||
|
logos/
|
||||||
|
├── README.md ← этот файл
|
||||||
|
├── preview.html ← превью всех 5 логотипов
|
||||||
|
│
|
||||||
|
├── logo-01-wordmark-wave.svg # Главный вариант
|
||||||
|
├── logo-01-wordmark-wave-icon-only.svg # Иконка только (фавикон)
|
||||||
|
├── logo-01-wordmark-wave-black.svg # Чёрная версия
|
||||||
|
│
|
||||||
|
├── logo-02-circle-wave.svg
|
||||||
|
├── logo-02-circle-wave-black.svg
|
||||||
|
│
|
||||||
|
├── logo-03-phone-wave.svg
|
||||||
|
├── logo-03-phone-wave-black.svg
|
||||||
|
│
|
||||||
|
├── logo-04-hex-data.svg
|
||||||
|
├── logo-04-hex-data-black.svg
|
||||||
|
│
|
||||||
|
├── logo-05-c-wave.svg
|
||||||
|
└── logo-05-c-wave-black.svg
|
||||||
|
```
|
||||||
|
|
||||||
|
## Концепции
|
||||||
|
|
||||||
|
### 01. Wordmark + Sound Wave (главный)
|
||||||
|
- **Тип:** Словоформ с иконкой
|
||||||
|
- **Формат:** Горизонтальный (320x60)
|
||||||
|
- **Иконка:** 5 вертикальных баров — аудио-волна слева от текста
|
||||||
|
- **Цвет:** Зелёный градиент (#22c55e → #16a34a)
|
||||||
|
- **Текст:** `calls` белый, `24` зелёный
|
||||||
|
- **Шрифт:** Inter Bold / SF Pro / -apple-system
|
||||||
|
- **Использование:** header, футер, презентации, сайт
|
||||||
|
- **Файлы:** wordmark + icon-only + black version
|
||||||
|
|
||||||
|
### 02. Circle Sound Wave
|
||||||
|
- **Тип:** Circular icon / Favicon
|
||||||
|
- **Формат:** Квадрат 60x60, центрированный
|
||||||
|
- **Форма:** Круг с аудио-волной внутри
|
||||||
|
- **Использование:** фавикон, иконка приложения, avatars, дашборд
|
||||||
|
|
||||||
|
### 03. Phone + Wave
|
||||||
|
- **Тип:** Line-art icon
|
||||||
|
- **Формат:** Квадрат 60x60
|
||||||
|
- **Форма:** Телефонная трубка + исходящие волны
|
||||||
|
- **Использование:** иконка раздела звонков, кнопки, иллюстрации
|
||||||
|
|
||||||
|
### 04. Hex Data Grid
|
||||||
|
- **Тип:** Geometric icon (Bauhaus)
|
||||||
|
- **Формат:** Квадрат 60x60, гексагон
|
||||||
|
- **Форма:** Гексагон с аудио-волной и точками данных
|
||||||
|
- **Использование:** премиальный вариант, tech-ассоциация, дашборд
|
||||||
|
|
||||||
|
### 05. C-Wave
|
||||||
|
- **Тип:** Abstract letterform
|
||||||
|
- **Формат:** Квадрат 60x60
|
||||||
|
- **Форма:** Буква «C» → звуковая волна (непрерывный path)
|
||||||
|
- **Использование:** минималистичный вариант, Apple-like, favicon
|
||||||
|
|
||||||
|
## Цвета
|
||||||
|
|
||||||
|
| Назначение | HEX |
|
||||||
|
|-----------|-----|
|
||||||
|
| Зелёный акцент | #22c55e |
|
||||||
|
| Зелёный тёмный | #16a34a |
|
||||||
|
| Зелёный глубокий | #15803d |
|
||||||
|
| Белый | #ffffff |
|
||||||
|
| Чёрный | #000000 |
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
### В HTML
|
||||||
|
```html
|
||||||
|
<!-- Wordmark (header) -->
|
||||||
|
<img src="logos/logo-01-wordmark-wave.svg" alt="calls24" height="48">
|
||||||
|
|
||||||
|
<!-- Icon only (favicon / mobile header) -->
|
||||||
|
<img src="logos/logo-01-wordmark-wave-icon-only.svg" alt="calls24" height="32">
|
||||||
|
|
||||||
|
<!-- Icon variant -->
|
||||||
|
<img src="logos/logo-02-circle-wave.svg" alt="calls24" height="32">
|
||||||
|
```
|
||||||
|
|
||||||
|
### В SVG (inline, рекомендуемо)
|
||||||
|
```html
|
||||||
|
<svg class="calls24-logo" role="img" aria-label="calls24">
|
||||||
|
<use href="logos/logo-01-wordmark-wave.svg"/>
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
```css
|
||||||
|
/* Зелёный акцент из логотипа */
|
||||||
|
.calls24 .cta { color: #22c55e; }
|
||||||
|
.calls24 .accent { background: linear-gradient(135deg, #22c55e, #15803d); }
|
||||||
|
```
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #01 — Чёрная версия (для печати, гравировки, светлого фона) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
|
||||||
|
<g transform="translate(4, 5)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000000"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000000" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000000" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000000" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000000" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
<text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#000000">
|
||||||
|
calls<tspan fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 918 B |
@@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #01 — Иконка только (для фавикона, шапки, мобильного) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(3, 3)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 908 B |
@@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #01: Minimalist Wordmark + Sound Wave -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#16a34a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Sound wave icon (left) -->
|
||||||
|
<g transform="translate(4, 5)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#waveGrad)"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#waveGrad)" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#waveGrad)" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Wordmark -->
|
||||||
|
<text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#ffffff">
|
||||||
|
calls<tspan fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #02 — Чёрная версия -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#000000" stroke-width="2" opacity="0.15"/>
|
||||||
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="#000000"/>
|
||||||
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
|
||||||
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
|
||||||
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
|
||||||
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 680 B |
@@ -0,0 +1,25 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #02: Geometric Circle Sound Wave -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="waveGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Outer circle ring -->
|
||||||
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
|
||||||
|
|
||||||
|
<!-- Sound wave bars inside circle -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<!-- Center vertical bar -->
|
||||||
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="url(#waveGrad2)"/>
|
||||||
|
<!-- Left bars -->
|
||||||
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
||||||
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
||||||
|
<!-- Right bars -->
|
||||||
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
||||||
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #03 — Чёрная версия -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<g transform="translate(5, 2)">
|
||||||
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="round"/>
|
||||||
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 858 B |
@@ -0,0 +1,20 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #03: Phone Handset + Sound Wave -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="phoneGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#16a34a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<g transform="translate(5, 2)">
|
||||||
|
<!-- Phone handset outline -->
|
||||||
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Sound waves emanating -->
|
||||||
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,59 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo — Animated Loop: continuous wave, no dots, pulsing 24 -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<style>
|
||||||
|
/* Wave bars — continuous breathing */
|
||||||
|
.w { animation: wave 2.4s ease-in-out infinite; }
|
||||||
|
.w1 { animation-delay: 0s; }
|
||||||
|
.w2 { animation-delay: 0.15s; }
|
||||||
|
.w3 { animation-delay: 0.3s; }
|
||||||
|
.w4 { animation-delay: 0.45s; }
|
||||||
|
.w5 { animation-delay: 0.6s; }
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% { transform: scaleY(1); }
|
||||||
|
50% { transform: scaleY(0.85); }
|
||||||
|
}
|
||||||
|
/* "24" bright pulse */
|
||||||
|
.b24 { animation: brightPulse 2.4s ease-in-out infinite; }
|
||||||
|
@keyframes brightPulse {
|
||||||
|
0%, 100% { fill: #22c55e; filter: drop-shadow(0 0 0px transparent); }
|
||||||
|
50% { fill: #4ade80; filter: drop-shadow(0 0 6px rgba(34,197,94,0.5)); }
|
||||||
|
}
|
||||||
|
/* Tech line — pulse */
|
||||||
|
.tech-line {
|
||||||
|
stroke-dasharray: 30;
|
||||||
|
animation: linePulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes linePulse {
|
||||||
|
0%, 100% { opacity: 0.8; }
|
||||||
|
50% { opacity: 0.2; }
|
||||||
|
}
|
||||||
|
/* Gradient shimmer */
|
||||||
|
.grad-stop { animation: shimmer 3s ease-in-out infinite; }
|
||||||
|
@keyframes shimmer {
|
||||||
|
0%, 100% { stop-color: #22c55e; }
|
||||||
|
50% { stop-color: #4ade80; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Animated Wave (no dots) -->
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Wordmark -->
|
||||||
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">Calls<tspan class="b24" font-weight="700">24</tspan></text>
|
||||||
|
|
||||||
|
<!-- Tech line -->
|
||||||
|
<line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Чёрная версия -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
|
||||||
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
|
||||||
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="#000000"/>
|
||||||
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
|
||||||
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
|
||||||
|
<circle cx="17" cy="24" r="2" fill="#000000" opacity="0.3"/>
|
||||||
|
<circle cx="25" cy="18" r="2" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="33" cy="12" r="2" fill="#000000"/>
|
||||||
|
<circle cx="41" cy="18" r="2" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="49" cy="24" r="2" fill="#000000" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 883 B |
@@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04: Hexagonal Data Grid (Bauhaus) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Internal data bars (sound wave inside hex boundary) -->
|
||||||
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
|
||||||
|
<!-- Data points -->
|
||||||
|
<circle cx="17" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="33" cy="12" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="49" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,23 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Иконка только (фавикон, мобильный header) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,118 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Animated Wordmark: Icon + "Calls24" -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e">
|
||||||
|
<animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/>
|
||||||
|
</stop>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<style>
|
||||||
|
/* Wave bars */
|
||||||
|
.bar {
|
||||||
|
transform-origin: bottom center;
|
||||||
|
animation: barGrow 1.2s ease-out forwards;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.bar1 { animation-delay: 0.1s; }
|
||||||
|
.bar2 { animation-delay: 0.2s; }
|
||||||
|
.bar3 { animation-delay: 0.3s; }
|
||||||
|
.bar4 { animation-delay: 0.4s; }
|
||||||
|
.bar5 { animation-delay: 0.5s; }
|
||||||
|
@keyframes barGrow {
|
||||||
|
0% { transform: scaleY(0); opacity: 0; }
|
||||||
|
100% { transform: scaleY(1); opacity: 1; }
|
||||||
|
}
|
||||||
|
/* Pulse on center bar */
|
||||||
|
.bar3 { animation: barGrow 1.2s ease-out forwards, pulseBar 3s ease-in-out infinite 1.5s; }
|
||||||
|
@keyframes pulseBar {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
/* Data points */
|
||||||
|
.dot {
|
||||||
|
opacity: 0;
|
||||||
|
animation: dotIn 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
.dot1 { animation-delay: 0.5s; }
|
||||||
|
.dot2 { animation-delay: 0.6s; }
|
||||||
|
.dot3 { animation-delay: 0.7s; }
|
||||||
|
.dot4 { animation-delay: 0.8s; }
|
||||||
|
.dot5 { animation-delay: 0.9s; }
|
||||||
|
@keyframes dotIn {
|
||||||
|
0% { opacity: 0; transform: scale(0); }
|
||||||
|
60% { transform: scale(1.3); }
|
||||||
|
100% { opacity: var(--o, 0.5); transform: scale(1); }
|
||||||
|
}
|
||||||
|
/* Text */
|
||||||
|
.wordmark {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
animation: textIn 0.8s ease-out forwards;
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
@keyframes textIn {
|
||||||
|
0% { opacity: 0; transform: translateX(-10px); }
|
||||||
|
100% { opacity: 1; transform: translateX(0); }
|
||||||
|
}
|
||||||
|
/* Tech line */
|
||||||
|
.tech-line {
|
||||||
|
stroke-dasharray: 30;
|
||||||
|
stroke-dashoffset: 30;
|
||||||
|
animation: lineDraw 0.6s ease-out forwards;
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
@keyframes lineDraw {
|
||||||
|
0% { stroke-dashoffset: 30; }
|
||||||
|
100% { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
/* Floating particles */
|
||||||
|
.particle {
|
||||||
|
opacity: 0;
|
||||||
|
animation: float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.particle:nth-child(1) { animation-delay: 2s; }
|
||||||
|
.particle:nth-child(2) { animation-delay: 2.5s; }
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { opacity: 0; transform: translateY(0); }
|
||||||
|
50% { opacity: 0.6; transform: translateY(-3px); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- ===== ICON: Animated Sound Wave ===== -->
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect class="bar bar1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect class="bar bar2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect class="bar bar3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect class="bar bar4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect class="bar bar5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
|
||||||
|
<!-- Data points -->
|
||||||
|
<circle class="dot dot1" cx="7" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
|
||||||
|
<circle class="dot dot2" cx="15" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
|
||||||
|
<circle class="dot dot3" cx="23" cy="6" r="2" fill="#22c55e" style="--o: 1" opacity="1"/>
|
||||||
|
<circle class="dot dot4" cx="31" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
|
||||||
|
<circle class="dot dot5" cx="39" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
|
||||||
|
|
||||||
|
<!-- Floating particles -->
|
||||||
|
<circle class="particle" cx="23" cy="2" r="1" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle class="particle" cx="15" cy="10" r="1.5" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== WORDMARK ===== -->
|
||||||
|
<g class="wordmark">
|
||||||
|
<text x="56" y="40"
|
||||||
|
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||||||
|
font-weight="300"
|
||||||
|
font-size="30"
|
||||||
|
fill="#ffffff"
|
||||||
|
letter-spacing="-0.5">
|
||||||
|
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Tech underline -->
|
||||||
|
<line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
@@ -0,0 +1,36 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Wordmark: Чёрная версия (для светлого фона) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- ICON -->
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="#000000"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#000000" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#000000"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#000000" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- WORDMARK — чёрный текст на белом фоне -->
|
||||||
|
<text x="56" y="40"
|
||||||
|
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||||||
|
font-weight="300"
|
||||||
|
font-size="30"
|
||||||
|
fill="#000000"
|
||||||
|
letter-spacing="-0.5">
|
||||||
|
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Wordmark: Manrope (более характерный геометричный гротеск) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- ICON -->
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Шрифт: Manrope — геометричный гротеск, характерный x-height -->
|
||||||
|
<text x="56" y="38"
|
||||||
|
font-family="Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||||||
|
font-weight="400"
|
||||||
|
font-size="32"
|
||||||
|
fill="#ffffff"
|
||||||
|
letter-spacing="-0.3">
|
||||||
|
calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Двойная линия как tech-акцент -->
|
||||||
|
<line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #04 — Wordmark: Icon + "Calls24" -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- ===== ICON (Logo-04: зелёная волна) ===== -->
|
||||||
|
<g transform="translate(2, 2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== WORDMARK ===== -->
|
||||||
|
<!-- Шрифт: Inter — геометричный гротеск, идеален для tech/SaaS -->
|
||||||
|
<!-- "Calls" — тонкий/regular белый, "24" — bold зелёный -->
|
||||||
|
<text x="56" y="40"
|
||||||
|
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
||||||
|
font-weight="300"
|
||||||
|
font-size="30"
|
||||||
|
fill="#ffffff"
|
||||||
|
letter-spacing="-0.5">
|
||||||
|
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Tech-подчёркивание: тонкая зелёная линия под "24" -->
|
||||||
|
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #05 — Чёрная версия -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<path d="
|
||||||
|
M48 14
|
||||||
|
C38 10, 26 12, 18 18
|
||||||
|
C10 24, 8 34, 12 42
|
||||||
|
C14 48, 22 52, 32 50
|
||||||
|
C40 48, 46 42, 48 36
|
||||||
|
C46 38, 40 42, 32 42
|
||||||
|
C24 42, 18 38, 16 32
|
||||||
|
C14 26, 16 18, 24 14
|
||||||
|
C30 10, 42 10, 48 14
|
||||||
|
Z
|
||||||
|
" fill="#000000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 438 B |
@@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #05: Letter "C" + Continuous Wave (Apple-like) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="cGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/>
|
||||||
|
<stop offset="100%" stop-color="#16a34a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- C shape morphed into wave -->
|
||||||
|
<path d="
|
||||||
|
M48 14
|
||||||
|
C38 10, 26 12, 18 18
|
||||||
|
C10 24, 8 34, 12 42
|
||||||
|
C14 48, 22 52, 32 50
|
||||||
|
C40 48, 46 42, 48 36
|
||||||
|
C46 38, 40 42, 32 42
|
||||||
|
C24 42, 18 38, 16 32
|
||||||
|
C14 26, 16 18, 24 14
|
||||||
|
C30 10, 42 10, 48 14
|
||||||
|
Z
|
||||||
|
" fill="url(#cGrad)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 700 B |
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #06 — Чёрная версия -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
|
||||||
|
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000000"/>
|
||||||
|
<circle cx="20" cy="18" r="1.5" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="12" cy="26" r="1.5" fill="#000000" opacity="0.35"/>
|
||||||
|
<circle cx="34" cy="12" r="1.5" fill="#000000" opacity="0.65"/>
|
||||||
|
<circle cx="40" cy="20" r="1.5" fill="#000000" opacity="0.5"/>
|
||||||
|
<circle cx="44" cy="32" r="1.5" fill="#000000" opacity="0.35"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 820 B |
@@ -0,0 +1,34 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- calls24 Logo #06: Hexagon + C-Wave (комбинированный) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#ef4444"/>
|
||||||
|
<stop offset="100%" stop-color="#dc2626"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Hexagon outline (Bauhaus, тонкая линия) -->
|
||||||
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
|
||||||
|
|
||||||
|
<!-- C-shaped wave inside hexagon (красная, как на странице) -->
|
||||||
|
<path d="
|
||||||
|
M44 16
|
||||||
|
C36 12, 24 14, 16 20
|
||||||
|
C8 26, 6 36, 10 42
|
||||||
|
C14 48, 22 50, 30 48
|
||||||
|
C38 46, 44 40, 46 34
|
||||||
|
C44 36, 38 40, 30 40
|
||||||
|
C22 40, 16 36, 14 30
|
||||||
|
C12 24, 14 18, 22 14
|
||||||
|
C28 10, 40 10, 44 16
|
||||||
|
Z
|
||||||
|
" fill="url(#hexC)"/>
|
||||||
|
|
||||||
|
<!-- Data points (красные, полупрозрачные) -->
|
||||||
|
<circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
|
||||||
|
<circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
|
||||||
|
<circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
|
||||||
|
<circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
|
||||||
|
<circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,118 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>calls24 — Animated Logo</title>
|
||||||
|
<style>
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;padding:40px 20px}
|
||||||
|
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px}
|
||||||
|
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
|
||||||
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:0 auto}
|
||||||
|
@media(max-width:600px){.grid{grid-template-columns:1fr}}
|
||||||
|
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
|
||||||
|
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
|
||||||
|
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
|
||||||
|
.card .desc{font-size:12px;color:#666;margin-bottom:24px;line-height:1.5}
|
||||||
|
.preview{background:#050505;border-radius:12px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:120px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>calls24 — Animated Logos</h1>
|
||||||
|
<p class="sub">SVG CSS animations</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
<!-- Entrance -->
|
||||||
|
<div class="card" style="grid-column:1/-1">
|
||||||
|
<div class="label">Entrance</div>
|
||||||
|
<div class="name">Волна растёт, текст выезжает, линия рисуется</div>
|
||||||
|
<div class="desc">Однократная анимация появления. Идеальна для hero, загрузочных экранов.</div>
|
||||||
|
<div class="preview">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"><animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/></stop>
|
||||||
|
<stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<style>
|
||||||
|
.b{transform-origin:bottom center;animation:grow 1s ease-out forwards;opacity:0}
|
||||||
|
.b1{animation-delay:.1s}.b2{animation-delay:.2s}.b3{animation-delay:.3s}.b4{animation-delay:.4s}.b5{animation-delay:.5s}
|
||||||
|
@keyframes grow{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
|
||||||
|
.b3{animation:grow 1s ease-out forwards, pulse 3s ease-in-out infinite 1.2s}
|
||||||
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
|
||||||
|
.d{opacity:0;animation:dp .5s ease-out forwards}
|
||||||
|
.d1{animation-delay:.5s}.d2{animation-delay:.6s}.d3{animation-delay:.7s}.d4{animation-delay:.8s}.d5{animation-delay:.9s}
|
||||||
|
@keyframes dp{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}100%{opacity:var(--o);transform:scale(1)}}
|
||||||
|
.t{opacity:0;transform:translateX(-10px);animation:ti .7s ease-out forwards;animation-delay:.6s}
|
||||||
|
@keyframes ti{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
|
||||||
|
.l{stroke-dasharray:30;stroke-dashoffset:30;animation:ld .5s ease-out forwards;animation-delay:1s}
|
||||||
|
@keyframes ld{0%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect class="b b1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<rect class="b b2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="b b3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g1)"/>
|
||||||
|
<rect class="b b4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="b b5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<circle class="d d1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
||||||
|
<circle class="d d2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
||||||
|
<circle class="d d3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
|
||||||
|
<circle class="d d4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
||||||
|
<circle class="d d5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
||||||
|
</g>
|
||||||
|
<g class="t">
|
||||||
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
||||||
|
<line class="l" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loop -->
|
||||||
|
<div class="card" style="grid-column:1/-1">
|
||||||
|
<div class="label">Loop</div>
|
||||||
|
<div class="name">Непрерывная волна + пульсация точек</div>
|
||||||
|
<div class="desc">Бесконечная анимация. Идеальна для header, лобби, загрузки.</div>
|
||||||
|
<div class="preview">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<style>
|
||||||
|
.w{animation:wave 2.4s ease-in-out infinite}
|
||||||
|
.w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
|
||||||
|
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
|
||||||
|
.p{animation:dp 2.4s ease-in-out infinite}
|
||||||
|
.p1{animation-delay:0s}.p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}.p5{animation-delay:.4s}
|
||||||
|
@keyframes dp{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o)*.5);transform:scale(.8)}}
|
||||||
|
.ll{stroke-dasharray:30;animation:lp 3s ease-in-out infinite}
|
||||||
|
@keyframes lp{0%,100%{opacity:.8}50%{opacity:.3}}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g2)"/>
|
||||||
|
<rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||||||
|
<rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||||||
|
<circle class="p p1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
||||||
|
<circle class="p p2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
||||||
|
<circle class="p p3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
|
||||||
|
<circle class="p p4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
||||||
|
<circle class="p p5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
||||||
|
<line class="ll" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,347 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>calls24 — Logo Concepts</title>
|
||||||
|
<style>
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;padding:40px 20px}
|
||||||
|
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px;color:#fff}
|
||||||
|
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
|
||||||
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;margin:0 auto}
|
||||||
|
@media(max-width:600px){.grid{grid-template-columns:1fr}}
|
||||||
|
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
|
||||||
|
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
|
||||||
|
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
|
||||||
|
.card .desc{font-size:12px;color:#666;line-height:1.5;margin-bottom:20px}
|
||||||
|
.logo-row{display:flex;align-items:center;gap:24px;padding:24px;background:#0a0a0a;border-radius:12px;margin-bottom:8px}
|
||||||
|
.icon-row{display:flex;gap:16px;justify-content:center;padding:16px;background:#0a0a0a;border-radius:12px}
|
||||||
|
.icon-row svg{max-height:48px;max-width:48px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>calls24 — Logo Concepts</h1>
|
||||||
|
<p class="sub">5 вариантов логотипа • SVG • Pure code</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
<!-- Logo 01 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">01</div>
|
||||||
|
<div class="name">Wordmark + Sound Wave</div>
|
||||||
|
<div class="desc">Минималистичный словоформ с вертикальной аудио-волной слева. Зелёный акцент на «24».</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="160" height="30">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(4,5)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
<text x="52" y="40" font-family="-apple-system,sans-serif" font-weight="700" font-size="32" fill="#ffffff">
|
||||||
|
calls<tspan fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w1b" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(3,3)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1b)"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1b)" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1b)" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w1c" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(3,3)">
|
||||||
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000"/>
|
||||||
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000" opacity="0.85"/>
|
||||||
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000" opacity="0.7"/>
|
||||||
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000" opacity="0.85"/>
|
||||||
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрный</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 02 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">02</div>
|
||||||
|
<div class="name">Circle Sound Wave</div>
|
||||||
|
<div class="desc">Круглый значок с аудио-волной внутри. Иконка / фавикон.</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
|
||||||
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="url(#w2)"/>
|
||||||
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
||||||
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
||||||
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
||||||
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#000" stroke-width="2" opacity="0.15"/>
|
||||||
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="#000"/>
|
||||||
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
|
||||||
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
|
||||||
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
|
||||||
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 03 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">03</div>
|
||||||
|
<div class="name">Phone + Wave</div>
|
||||||
|
<div class="desc">Трубка с исходящими звуковыми волнами. Прямая ассоциация со звонками.</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
||||||
|
<g transform="translate(5,2)">
|
||||||
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/>
|
||||||
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<g transform="translate(5,2)">
|
||||||
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000" stroke-width="2.5" stroke-linejoin="round"/>
|
||||||
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 04 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">04</div>
|
||||||
|
<div class="name">Hex Data Grid</div>
|
||||||
|
<div class="desc">Гексагон с волной и точками данных. Bauhaus + tech.</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w4" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="url(#w4)"/>
|
||||||
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="33" cy="12" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
||||||
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
||||||
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="#000"/>
|
||||||
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
||||||
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
||||||
|
<circle cx="33" cy="12" r="2" fill="#000"/>
|
||||||
|
<circle cx="25" cy="18" r="2" fill="#000" opacity="0.5"/>
|
||||||
|
<circle cx="41" cy="18" r="2" fill="#000" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 05 -->
|
||||||
|
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
|
||||||
|
<div class="label">05</div>
|
||||||
|
<div class="name">C-Wave (Apple-like)</div>
|
||||||
|
<div class="desc">Буква «C» от calls24 → звуковая волна. Непрерывный path, чистая геометрия.</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="w5" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path d="
|
||||||
|
M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50
|
||||||
|
C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32
|
||||||
|
C14 26,16 18,24 14 C30 10,42 10,48 14 Z
|
||||||
|
" fill="url(#w5)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<path d="M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50 C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32 C14 26,16 18,24 14 C30 10,42 10,48 14 Z" fill="#000"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 06 -->
|
||||||
|
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
|
||||||
|
<div class="label" style="color:#ef4444">06 ★</div>
|
||||||
|
<div class="name">Hexagon + C-Wave (комбинированный)</div>
|
||||||
|
<div class="desc">Гексагон (лого-04) + C-волна (лого-05). Волна красного #ef4444 как на странице. Точки данных по контуру.</div>
|
||||||
|
<div class="logo-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#ef4444"/><stop offset="100%" stop-color="#dc2626"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
|
||||||
|
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="url(#hexC)"/>
|
||||||
|
<circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
|
||||||
|
<circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
|
||||||
|
<circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
|
||||||
|
<circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
|
||||||
|
<circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
|
||||||
|
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000"/>
|
||||||
|
<circle cx="20" cy="18" r="1.5" fill="#000" opacity="0.5"/>
|
||||||
|
<circle cx="12" cy="26" r="1.5" fill="#000" opacity="0.35"/>
|
||||||
|
<circle cx="34" cy="12" r="1.5" fill="#000" opacity="0.65"/>
|
||||||
|
<circle cx="40" cy="20" r="1.5" fill="#000" opacity="0.5"/>
|
||||||
|
<circle cx="44" cy="32" r="1.5" fill="#000" opacity="0.35"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрная версия</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo 04 Wordmark variants -->
|
||||||
|
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
|
||||||
|
<div class="label" style="color:#22c55e">04a ★</div>
|
||||||
|
<div class="name">Hex-Wave + "Calls24" — Inter (Regular/Bold)</div>
|
||||||
|
<div class="desc">Иконка + словоформ. Шрифт Inter: тонкий "calls" (#300 weight), жирный "24" (#700). Зелёный градиент на волне. Tech-подчёркивание.</div>
|
||||||
|
<div class="logo-row" style="justify-content:center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">
|
||||||
|
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-row">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<defs><linearGradient id="h1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/></linearGradient></defs>
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#h1)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="#000"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#000" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#000" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#000"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#000" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#000" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной иконка • чёрная иконка</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
|
||||||
|
<div class="label">04b</div>
|
||||||
|
<div class="name">Hex-Wave + "Calls24" — Manrope (Medium/Bold)</div>
|
||||||
|
<div class="desc">Тот же знак, другой шрифт. Manrope: более характерный, геометричный. Двойная tech-линия как акцент.</div>
|
||||||
|
<div class="logo-row" style="justify-content:center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hexGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(2,2)">
|
||||||
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad2)"/>
|
||||||
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
||||||
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
||||||
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
||||||
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
||||||
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="38" font-family="Manrope,-apple-system,sans-serif" font-weight="400" font-size="32" fill="#fff" letter-spacing="-0.3">
|
||||||
|
calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
||||||
|
</text>
|
||||||
|
<line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||||||
|
<line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">Inter vs Manrope — выбери характер</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||