188 lines
6.6 KiB
HTML
188 lines
6.6 KiB
HTML
<!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>
|
||
<a href="/firewall.html" class="tab-link">
|
||
<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"/>
|
||
<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"/>
|
||
</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>
|