123 lines
6.8 KiB
HTML
123 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Алтел — Повторные обращения клиентов</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--red:#FF4757;--orange:#FFA502}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1200px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:100px 24px}
|
||
.hero h1{font-size:48px;font-weight:800;line-height:1.1;margin-bottom:20px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:800px}
|
||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:40px}
|
||
.stat-card{background:rgba(255,255,255,0.1);border-radius:12px;padding:24px;text-align:center}
|
||
.stat-card .num{font-size:48px;font-weight:800;color:var(--cyan);display:block}
|
||
.stat-card .label{color:#9aa3b2;font-size:14px;margin-top:8px;display:block}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:16px}
|
||
.section .subtitle{color:var(--gray-500;font-size:18px;margin-bottom:32px}
|
||
.table-container{overflow-x:auto;background:var(--gray-100);border-radius:16px;padding:24px}
|
||
table{width:100%;border-collapse:collapse;font-size:15px}
|
||
th{text-align:left;background:var(--ink);color:var(--white);padding:16px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.5px}
|
||
td{padding:16px;border-bottom:1px solid #e0e4e8}
|
||
tr:hover{background:#fff}
|
||
.badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700}
|
||
.badge-warning{background:var(--orange);color:#000}
|
||
.badge-danger{background:var(--red);color:#fff}
|
||
.company-col{font-weight:600;min-width:250px}
|
||
.phone-col{color:var(--gray-500);font-family:monospace}
|
||
.id-col{font-family:monospace;color:var(--gray-500)}
|
||
.days-col{font-weight:700;color:var(--ink)}
|
||
.highlight{background:var(--cyan-50)}
|
||
@media (max-width:768px){
|
||
.hero h1{font-size:32px}
|
||
.section h2{font-size:28px}
|
||
.stats{grid-template-columns:1fr}
|
||
.container{padding:48px 20px}
|
||
th,td{padding:12px 8px;font-size:13px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container" style="padding:40px 0">
|
||
<h1>📊 Анализ повторных обращений клиентов Алтел</h1>
|
||
<p>Мониторинг клиентов, которые обращались повторно после истечения 3-месячного срока устранения проблем. Проблема не была решена в установленный срок.</p>
|
||
<div class="stats">
|
||
<div class="stat-card">
|
||
<span class="num" id="totalApps">0</span>
|
||
<span class="label">Всего заявок</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="num" id="uniqueClients">0</span>
|
||
<span class="label">Уникальных клиентов</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="num" id="repeatCount" style="color:var(--red)">0</span>
|
||
<span class="label">Повторных (>3 мес)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>🔴 Клиенты с повторными обращениями после 3 месяцев</h2>
|
||
<p class="subtitle">Период между заявками превышает 90 дней — проблема осталась нерешённой</p>
|
||
<div class="table-container">
|
||
<table id="repeatsTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Компания</th>
|
||
<th>Телефон</th>
|
||
<th>Первая заявка</th>
|
||
<th>Повторная заявка</th>
|
||
<th>Дней между</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const data = {"total_applications":387,"unique_clients":128,"total_repeats":8,"repeats":[{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7081121715,"first_id":549607,"first_date":"05.01.2025","repeat_id":568952,"repeat_date":"24.06.2026","days_between":171},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7002242610,"first_id":561827,"first_date":"03.12.2025","repeat_id":568131,"repeat_date":"04.06.2026","days_between":183},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7002294367,"first_id":563603,"first_date":"30.01.2026","repeat_id":570640,"repeat_date":"03.08.2026","days_between":185},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7081484578,"first_id":539438,"first_date":"02.05.2024","repeat_id":566477,"repeat_date":"16.04.2026","days_between":714},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7081655470,"first_id":561826,"first_date":"03.12.2025","repeat_id":568369,"repeat_date":"10.06.2026","days_between":189},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7081916257,"first_id":563614,"first_date":"30.01.2026","repeat_id":568951,"repeat_date":"24.06.2026","days_between":144},{"company":"АО \"КАЗТЕЛЕПОРТ\"","phone":7086768198,"first_id":562359,"first_date":"19.12.2025","repeat_id":568953,"repeat_date":"24.06.2026","days_between":187},{"company":"АО «BEREKE BANK» ДОЧЕРНИЙ БАНК LESHA BANK LLC (PUBLIC))","phone":7081784711,"first_id":557582,"first_date":"11.08.2025","repeat_id":566616,"repeat_date":"21.04.2026","days_between":252}]};
|
||
|
||
document.getElementById('totalApps').textContent = data.total_applications.toLocaleString('ru-RU');
|
||
document.getElementById('uniqueClients').textContent = data.unique_clients.toLocaleString('ru-RU');
|
||
document.getElementById('repeatCount').textContent = data.total_repeats.toLocaleString('ru-RU');
|
||
|
||
const tbody = document.getElementById('tableBody');
|
||
data.repeats.forEach((row, index) => {
|
||
const tr = document.createElement('tr');
|
||
if (index % 2 === 0) tr.className = 'highlight';
|
||
|
||
const statusBadge = row.days_between > 180
|
||
? '<span class="badge badge-danger">Критично (>6 мес)</span>'
|
||
: '<span class="badge badge-warning">>3 месяцев</span>';
|
||
|
||
tr.innerHTML = `
|
||
<td class="company-col">${row.company}</td>
|
||
<td class="phone-col">+7 (${row.phone.toString().slice(0,3)}) ${row.phone.toString().slice(3,6)}-${row.phone.toString().slice(6,8)}-${row.phone.toString().slice(8)}</td>
|
||
<td>
|
||
<div style="font-weight:600">${row.first_date}</div>
|
||
<div class="id-col">№ ${row.first_id}</div>
|
||
</td>
|
||
<td>
|
||
<div style="font-weight:600">${row.repeat_date}</div>
|
||
<div class="id-col">№ ${row.repeat_id}</div>
|
||
</td>
|
||
<td class="days-col">${row.days_between} дн.</td>
|
||
<td>${statusBadge}</td>
|
||
`;
|
||
tbody.appendChild(tr);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|