2026-04-13 09:46:02 +03:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="ru">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>DHCP сервер — AlpineRouter</title>
|
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
|
<svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
|
|
|
|
<path d="M2 17l10 5 10-5"/>
|
|
|
|
|
|
<path d="M2 12l10 5 10-5"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<h1>AlpineRouter</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
|
<button class="btn btn-ghost" id="refreshBtn" title="Обновить">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
|
|
|
|
|
|
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
|
|
|
|
|
<path d="M3 3v5h5"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Обновить
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="tab-nav">
|
|
|
|
|
|
<a href="/" class="tab-link">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
|
|
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
|
|
|
|
<path d="M2 17l10 5 10-5"/>
|
|
|
|
|
|
<path d="M2 12l10 5 10-5"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Интерфейсы
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/dhcp.html" class="tab-link active">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
|
|
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
DHCP сервер
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/clients.html" class="tab-link">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
|
|
|
|
<circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
|
|
|
|
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.87"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Клиенты
|
|
|
|
|
|
</a>
|
2026-04-13 12:40:49 +03:00
|
|
|
|
<a href="/firewall.html" class="tab-link">
|
2026-04-13 09:46:02 +03:00
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
|
|
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
2026-04-13 12:40:49 +03:00
|
|
|
|
<path d="M9 12l2 2 4-4"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Файрвол
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/proxy.html" class="tab-link">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
|
|
|
|
<circle cx="12" cy="12" r="3"/>
|
|
|
|
|
|
<path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
2026-04-13 09:46:02 +03:00
|
|
|
|
</svg>
|
|
|
|
|
|
Прокси
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<main class="dhcp-main">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Not-installed warning -->
|
|
|
|
|
|
<div id="notInstalledBanner" class="alert alert-error hidden">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
|
|
|
|
|
|
<circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<strong>Пакет dnsmasq не установлен.</strong>
|
|
|
|
|
|
Для работы DHCP-сервера выполните на роутере:
|
|
|
|
|
|
<code>apk add dnsmasq</code>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Service status bar -->
|
|
|
|
|
|
<div class="dhcp-status-bar" id="statusBar">
|
|
|
|
|
|
<div class="status-info">
|
|
|
|
|
|
<span class="status-label">DHCP сервер (dhcpd)</span>
|
|
|
|
|
|
<span id="svcStatus" class="svc-badge stopped">остановлен</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="status-actions">
|
|
|
|
|
|
<label class="toggle-label" id="enableToggleWrap" title="Включить/выключить DHCP сервер">
|
|
|
|
|
|
<span>Включить сервер</span>
|
|
|
|
|
|
<input type="checkbox" id="enableToggle">
|
|
|
|
|
|
<span class="toggle-slider"></span>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<button class="btn btn-primary" id="applyBtn" disabled>Применить</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Pools section -->
|
|
|
|
|
|
<section class="dhcp-section">
|
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
|
<h2>Пулы адресов</h2>
|
|
|
|
|
|
<p class="section-desc">
|
|
|
|
|
|
Каждый пул привязан к одному интерфейсу. Интерфейсы со шлюзом (WAN/uplink)
|
|
|
|
|
|
недоступны для DHCP — они помечены <span class="tag-gw">WAN</span>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="poolsLoading" class="loading" style="height:120px">
|
|
|
|
|
|
<div class="spinner"></div>
|
|
|
|
|
|
<span>Загрузка...</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="poolsGrid" class="pools-grid hidden"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="noIfaces" class="empty-state hidden">
|
|
|
|
|
|
Нет подходящих интерфейсов (с IP-адресом и без шлюза)
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Pool edit modal -->
|
|
|
|
|
|
<div id="poolModal" class="modal hidden" role="dialog" aria-modal="true">
|
|
|
|
|
|
<div class="modal-backdrop" id="poolModalBackdrop"></div>
|
|
|
|
|
|
<div class="modal-box">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h2 id="poolModalTitle">Настройка пула</h2>
|
|
|
|
|
|
<button class="btn-icon" id="closePoolModal" title="Закрыть">✕</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<form id="poolForm" autocomplete="off">
|
|
|
|
|
|
<input type="hidden" id="pIface">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label class="checkbox-label">
|
|
|
|
|
|
<input type="checkbox" id="pEnabled">
|
|
|
|
|
|
<span>Пул активен</span>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label>Подсеть</label>
|
|
|
|
|
|
<div class="inline-pair">
|
|
|
|
|
|
<input type="text" id="pSubnet" placeholder="172.16.54.0" class="font-mono">
|
|
|
|
|
|
<span class="pair-sep">маска</span>
|
|
|
|
|
|
<input type="text" id="pNetmask" placeholder="255.255.255.0" class="font-mono">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label>Диапазон адресов</label>
|
|
|
|
|
|
<div class="inline-pair">
|
|
|
|
|
|
<input type="text" id="pRangeStart" placeholder="172.16.54.100" class="font-mono">
|
|
|
|
|
|
<span class="pair-sep">—</span>
|
|
|
|
|
|
<input type="text" id="pRangeEnd" placeholder="172.16.54.200" class="font-mono">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label for="pRouter">Шлюз (option routers)</label>
|
|
|
|
|
|
<input type="text" id="pRouter" placeholder="172.16.54.1" class="font-mono">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label for="pDNS">DNS-серверы (через пробел)</label>
|
|
|
|
|
|
<input type="text" id="pDNS" placeholder="8.8.8.8 8.8.4.4" class="font-mono">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<label for="pLease">Время аренды (секунды)</label>
|
|
|
|
|
|
<input type="number" id="pLease" placeholder="86400" min="60" max="604800">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
|
<button class="btn btn-ghost" id="cancelPoolBtn">Отмена</button>
|
|
|
|
|
|
<button class="btn btn-primary" id="savePoolBtn">Сохранить</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="dhcp.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
