sozday-sayt-pomoschnik-dlya/index.html

157 lines
9.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
<html lang="ru" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Маршрутизация вызовов ЭС</title>
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="design-system/kt-ai-components.css">
<link rel="stylesheet" href="design-system/kt-ai-page.css">
<link rel="stylesheet" href="design-system/vibe-theme.css">
<style>
a.kt-ai-btn { text-decoration: none; }
.route-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-9); }
@media (max-width: 900px) { .route-cards { grid-template-columns: 1fr; } }
.route-card { padding: var(--kt-ai-space-7); }
.route-card h3 { margin: 0 0 var(--kt-ai-space-2); }
.route-card .src { color: var(--kt-ai-fg-muted); margin: 0 0 var(--kt-ai-space-5); }
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--kt-ai-space-3); }
.chain-node { flex: 1 1 auto; min-width: 120px; padding: var(--kt-ai-space-4) var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: 10px; background: var(--kt-ai-bg); text-align: center; }
.chain-node strong { display: block; font-size: 15px; }
.chain-node span { display: block; font-size: 12px; color: var(--kt-ai-fg-muted); margin-top: 2px; }
.chain-node.active { border-color: var(--vibe-accent); background: var(--vibe-tint); }
.chain-arrow { align-self: center; flex: 0 0 auto; color: var(--kt-ai-fg-muted); }
.route-note { margin: var(--kt-ai-space-5) 0 0; font-size: 13px; color: var(--kt-ai-fg-muted); }
.search-panel { padding: var(--kt-ai-space-7); margin-top: var(--kt-ai-space-7); }
.search-row { display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-top: var(--kt-ai-space-5); }
.search-row .kt-ai-field { flex: 1 1 280px; }
.reg-list { margin-top: var(--kt-ai-space-6); display: grid; gap: var(--kt-ai-space-4); }
.reg-row { padding: var(--kt-ai-space-5) var(--kt-ai-space-6); }
.reg-row-top { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
.reg-row-num { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; }
.reg-row-meta { color: var(--kt-ai-fg-muted); font-size: 13px; margin-top: var(--kt-ai-space-2); }
.reg-row-reserve { margin-top: var(--kt-ai-space-3); font-size: 13px; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: 6px; background: var(--vibe-tint); }
.steps-list { list-style: none; padding: 0; margin: var(--kt-ai-space-7) 0 0; display: grid; gap: var(--kt-ai-space-5); }
.steps-list li { display: flex; gap: var(--kt-ai-space-4); }
.step-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--vibe-tint); color: var(--kt-ai-fg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.steps-list p { margin: 0; }
</style>
</head>
<body>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>Помощник: экстренные службы</strong>
<span class="kt-ai-spacer"></span>
<a class="kt-ai-btn" data-variant="ghost" href="#register">Реестр окон</a>
<a class="kt-ai-btn" data-variant="ghost" href="#routes">Схема</a>
</div>
</header>
<section class="kt-ai-hero" data-align="center">
<div class="kt-ai-wrap">
<h1>Схема маршрутизации вызовов <span class="vibe-highlight">для экстренных служб</span></h1>
<p class="kt-ai-hero-sub">Введите оконечный номер формата ABC21UV (например, 7271UV для Алматы) — получите состав номера, маршрут вызова для мобильных и фиксированных абонентов и информацию о резерве.</p>
<div class="kt-ai-hero-actions">
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#search">Найти номер</a>
</div>
</div>
</section>
<section id="search" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-section-head">
<h2>Поиск по оконечному номеру</h2>
<p>Номер из реестра или любой — для любого номера покажем полный маршрут. Резерв показывается только для номеров из реестра.</p>
</div>
<div class="kt-ai-card search-panel">
<div class="search-row">
<div class="kt-ai-field">
<label class="kt-ai-label" for="num">Оконечный номер (ABC21UV)</label>
<input id="num" class="kt-ai-input" type="text" placeholder="Например: 7271UV" autocomplete="off">
</div>
</div>
<div class="search-row">
<button id="findBtn" class="kt-ai-btn" data-variant="primary">Показать маршрут</button>
</div>
</div>
<div id="resDetail" class="kt-ai-card" style="margin-top:var(--kt-ai-space-5); display:none;">
<div class="reg-row-top">
<span class="reg-row-num" id="rdNum"></span>
<span id="rdChips"></span>
</div>
<div class="reg-row-meta" id="rdMeta"></div>
<div class="reg-row-meta" id="rdOwn"></div>
<div class="reg-row-reserve" id="rdReserve"></div>
</div>
<div class="route-cards">
<div class="kt-ai-card route-card">
<h3>От мобильных операторов</h3>
<p class="src" id="r1src"></p>
<div class="chain" id="chain1"></div>
<p class="route-note">Вызов поступает на транзит SSW/NGN, затем на регион SSW/NGN и дальше — на оконечный номер.</p>
</div>
<div class="kt-ai-card route-card">
<h3>От фиксированных абонентов</h3>
<p class="src" id="r2src"></p>
<div class="chain" id="chain2"></div>
<p class="route-note">Вызов поступает от той станции, которой принадлежит номер, на свой регион SSW/NGN, затем на станцию, которой принадлежит оконечный номер.</p>
</div>
</div>
</div>
</div>
</section>
<section id="register" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Реестр оконечных номеров</h2>
<p id="regCounter"></p>
</div>
<div id="regList" class="reg-list"></div>
</div>
</section>
<section id="routes" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-section-head">
<h2>Как строится маршрут</h2>
<p>Экстренные службы обслуживаются по двум независимым цепочкам — от мобильного оператора и от фиксированной АТС.</p>
</div>
<ol class="steps-list">
<li><span class="step-n">1</span><p><b>Мобильный оператор</b> — вызов поступает на SSW/NGN транзит, с транзита — на SSW/NGN регион (рег.), и с региона — на оконечный номер.</p></li>
<li><span class="step-n">2</span><p><b>Фиксированный абонент</b> — вызов поступает от той станции, которой принадлежит номер абонента, на свой регион SSW/NGN.</p></li>
<li><span class="step-n">3</span><p><b>Регион SSW/NGN</b> по номеру пересчёта определяет, кому принадлежит оконечный номер: собственный номер станции, BRW SIP, АТС или АТС зоны — и маршрутизирует трафик туда.</p></li>
<li><span class="step-n">4</span><p><b>Резерв для ЭС</b> — предусмотрен автоматически: при недоступности SIP-номера вызов уходит в SIP Trunk на резервный номер (например 7272222222, принадлежит ГТС Алматы).</p></li>
</ol>
</div>
</section>
<section class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Формат оконечного номера — ABC21UV</h2>
<p>Для Алматы: 7271UV. Реестр пополняется, а схема пересчитывается автоматически — введите номер в поле поиска и сверьте маршрут.</p>
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#search">Перейти к поиску</a>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 Помощник по маршрутизации ЭС</span>
<span class="kt-ai-spacer"></span>
<span>SSW/NGN · ТДМ · GPON · SIP · BRW SIP</span>
</footer>
<script src="script.js"></script>
</body>
</html>