2024-11-26 03:12:55 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
|
|
|
|
|
<title>Docker P2P Manager</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background-color: #1a1a1a;
|
|
|
|
|
color: white;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
#titlebar {
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
background-color: #2c2c2c;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
pear-ctrl[data-platform="darwin"] {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
#sidebar {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 30px;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-color: #2c2c2c;
|
|
|
|
|
height: calc(100vh - 30px);
|
|
|
|
|
width: 250px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
transition: width 0.3s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
#sidebar.collapsed {
|
|
|
|
|
width: 50px;
|
|
|
|
|
}
|
|
|
|
|
#sidebar.collapsed .content {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#collapse-sidebar-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
background-color: #444;
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
#content {
|
|
|
|
|
margin-left: 250px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 30px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
transition: margin-left 0.3s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
#sidebar.collapsed ~ #content {
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
}
|
|
|
|
|
.connection-status {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
.status-connected {
|
|
|
|
|
background-color: green;
|
|
|
|
|
}
|
|
|
|
|
.status-disconnected {
|
|
|
|
|
background-color: red;
|
|
|
|
|
}
|
|
|
|
|
#terminal-modal {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-height: 400px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
background-color: #1a1a1a;
|
|
|
|
|
border-top: 2px solid #444;
|
|
|
|
|
display: none;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
#terminal-modal .header {
|
|
|
|
|
background-color: #444;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
#terminal-container {
|
2024-11-26 03:31:29 -05:00
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-color: black;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
2024-11-26 03:12:55 -05:00
|
|
|
#tray {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #444;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
#tray .tray-item {
|
|
|
|
|
background-color: #555;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="titlebar">
|
|
|
|
|
<pear-ctrl></pear-ctrl>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="sidebar">
|
|
|
|
|
<button id="collapse-sidebar-btn"><</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<h4 class="text-center mt-3">Connections</h4>
|
|
|
|
|
<ul id="connection-list" class="list-group mb-3"></ul>
|
|
|
|
|
<form id="add-connection-form" class="px-3">
|
|
|
|
|
<input type="text" id="new-connection-topic" class="form-control mb-2" placeholder="Enter server topic" required>
|
|
|
|
|
<button type="submit" class="btn btn-primary w-100">Add Connection</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="content">
|
|
|
|
|
<h1 id="connection-title">Select a Connection</h1>
|
|
|
|
|
<div id="dashboard" class="hidden">
|
|
|
|
|
<h2>Containers</h2>
|
|
|
|
|
<table class="table table-dark table-striped">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Name</th>
|
|
|
|
|
<th>Status</th>
|
|
|
|
|
<th>Actions</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="container-list"></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="terminal-modal">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span id="terminal-title"></span>
|
2024-11-26 03:31:29 -05:00
|
|
|
<div>
|
|
|
|
|
<button id="kill-terminal-btn" class="btn btn-sm btn-danger">Kill Terminal</button>
|
|
|
|
|
<button id="minimize-terminal-btn" class="btn btn-sm btn-secondary">Minimize</button>
|
|
|
|
|
</div>
|
2024-11-26 03:12:55 -05:00
|
|
|
</div>
|
|
|
|
|
<div id="terminal-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tray"></div>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
|
|
|
|
|
<script type="module" src="app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
