addressbook_web/frontend/index.html

60 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Адресная книга подключений</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Адресная книга подключений</h1>
<!-- Панель управления папками -->
<div class="folder-controls">
<h2>Управление папками</h2>
<input type="text" id="folderName" placeholder="Имя папки">
<select id="parentFolder">
<option value="">Корневая папка</option>
</select>
<button onclick="createFolder()">Создать папку</button>
<button onclick="editFolder()">Редактировать папку</button>
<button onclick="deleteFolder()">Удалить папку</button>
</div>
<!-- Форма для добавления подключения -->
<div class="connection-controls">
<h2>Добавить подключение</h2>
<form id="addConnectionForm">
<input type="text" id="connectionId" placeholder="ID подключения" required>
<input type="text" id="connectionName" placeholder="Имя подключения" required>
<select id="connectionType">
<option value="RustDesk">RustDesk</option>
<option value="SSH">SSH</option>
<option value="RDP">RDP</option>
</select>
<select id="connectionFolder">
<option value="">Без папки</option>
</select>
<button type="submit">Добавить</button>
</form>
</div>
<!-- Таблица подключений -->
<table id="connectionsTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>Connection ID</th>
<th>Имя</th>
<th>Тип</th>
<th>Папка</th>
<th>Действие</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>