Files
knock-gui/desktop/src/renderer/index.html

101 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knocker Desktop</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="app">
<header>
<h1 style="font-size: 2.5rem; margin-bottom: 1rem">
Port Knocker - Desktop
</h1>
<div class="modes">
<label
><input type="radio" name="mode" value="inline" checked />
Inline</label
>
<label><input type="radio" name="mode" value="yaml" /> YAML</label>
<label><input type="radio" name="mode" value="form" /> Form</label>
</div>
</header>
<section id="constant-section" class="constant-mode-section">
<div class="row">
<label style="min-width: 100px">Api URL</label>
<input id="apiUrl" type="text" placeholder="Введите api url" />
</div>
<div class="row">
<label style="min-width: 100px">Пароль</label>
<input id="password" type="password" placeholder="Введите пароль" />
</div>
<div class="row">
<label style="min-width: 100px">Задержка</label>
<input id="delay" type="text" value="1s" />
</div>
</section>
<section id="inline-section" class="mode-section">
<div class="row">
<label style="min-width: 100px">Цели</label>
<input id="targets" type="text" value="tcp:127.0.0.1:22" />
</div>
<div class="row">
<label style="min-width: 100px">Шлюз: </label>
<input id="gateway" type="text" placeholder="опционально" />
</div>
<div class="row" style="margin-top: 1rem">
<label
><input id="verbose" type="checkbox" checked /> Подробный
вывод</label
>
<label
><input id="waitConnection" type="checkbox" /> Ждать
соединение</label
>
</div>
</section>
<section id="yaml-section" class="mode-section hidden">
<div class="toolbar">
<button id="openFile">Открыть файл…</button>
<button id="saveFile">Сохранить как…</button>
<input
id="serverFilePath"
type="text"
placeholder="server file path (path в YAML)"
/>
</div>
<textarea
id="configYAML"
placeholder="Вставьте YAML или откройте файл"
></textarea>
</section>
<section id="form-section" class="mode-section hidden">
<div id="targetsList"></div>
<button id="addTarget">Добавить цель</button>
</section>
<footer>
<div class="row" style="width: 100%; margin-top: 1rem">
<button style="width: 100%" id="execute">Выполнить</button>
</div>
<div class="row hidden" id="encrypt-decrypt-row" style="width: 100%; margin-top: 1rem">
<button style="width: 50%" id="encrypt">Зашифровать</button>
<button style="width: 50%" id="decrypt">Расшифровать</button>
</div>
<div class="row" style="width: 100%; margin-top: 1rem">
<span id="status"></span>
</div>
</footer>
</div>
<script src="../../node_modules/js-yaml/dist/js-yaml.min.js"></script>
<script src="./renderer.js"></script>
</body>
</html>