luskbyte/docker-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
19596c7f51c302f5bd8dfa2f23c31f2d2828f80b
docker-manager/static/index.html
T
luskbyte f618d107ed Add initial project files
2026-04-24 15:36:53 -03:00

145 lines
8.1 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Docker Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="navbar-left">
<svg class="docker-logo" version="1.1" viewBox="0 0 122.88 88.17" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">.st0{fill:#0091E2;}</style>
<path class="st0" d="M121.68,33.34c-0.34-0.28-3.42-2.62-10.03-2.62c-1.71,0-3.48,0.17-5.19,0.46c-1.25-8.72-8.49-12.94-8.78-13.16 l-1.77-1.03l-1.14,1.65c-1.42,2.22-2.51,4.73-3.13,7.29c-1.2,4.96-0.46,9.63,2.05,13.62c-3.02,1.71-7.92,2.11-8.95,2.17l-80.93,0 c-2.11,0-3.82,1.71-3.82,3.82c-0.11,7.07,1.08,14.13,3.53,20.8c2.79,7.29,6.95,12.71,12.31,16.01c6.04,3.7,15.9,5.81,27.01,5.81 c5.01,0,10.03-0.46,14.99-1.37c6.9-1.25,13.51-3.65,19.6-7.12c5.02-2.91,9.52-6.61,13.34-10.94c6.44-7.24,10.26-15.33,13.05-22.51 c0.4,0,0.74,0,1.14,0c7.01,0,11.34-2.79,13.73-5.19c1.6-1.48,2.79-3.31,3.65-5.36l0.51-1.48L121.68,33.34L121.68,33.34z M71.59,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C70.68,38.98,71.08,39.38,71.59,39.38L71.59,39.38z M56.49,11.63h10.83c0.51,0,0.97-0.4,0.97-0.97V0.97c0-0.51-0.46-0.97-0.97-0.97 L56.49,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C55.52,11.17,55.97,11.63,56.49,11.63L56.49,11.63z M56.49,25.53h10.83 c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.46-0.97-0.97-0.97H56.49c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C55.52,25.08,55.97,25.53,56.49,25.53L56.49,25.53z M41.5,25.53h10.83c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97 l0,0H41.5c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C40.53,25.08,40.93,25.53,41.5,25.53L41.5,25.53z M26.28,25.53h10.83 c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0H26.28c-0.51,0-0.97,0.4-0.97,0.97v9.69 C25.37,25.08,25.77,25.53,26.28,25.53L26.28,25.53z M56.49,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97 l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C55.52,38.98,55.97,39.38,56.49,39.38L56.49,39.38L56.49,39.38z M41.5,39.38 h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C40.53,38.98,40.93,39.38,41.5,39.38L41.5,39.38L41.5,39.38z M26.28,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69 c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97v9.69C25.37,38.98,25.77,39.38,26.28,39.38L26.28,39.38z M11.35,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0 v9.69C10.44,38.98,10.84,39.38,11.35,39.38L11.35,39.38L11.35,39.38z"/>
</svg>
<h1>Docker UI</h1>
</div>
<div class="navbar-center">
<button class="tab-btn active" data-tab="dashboard">Dashboard</button>
<button class="tab-btn" data-tab="containers">Containers</button>
<button class="tab-btn" data-tab="images">Images</button>
</div>
<div class="navbar-right">
<div class="status-container">
<div class="status-indicator"></div>
<span class="status-text">Disconnected</span>
</div>
</div>
</nav>
<main class="app-container">
<div id="dashboard" class="tab-content active">
<h2>Dashboard</h2>
<div class="dashboard-grid status-grid">
<div class="status-card status-total">
<div class="status-count" id="containers-total-count">0</div>
<div class="status-label">Total Containers</div>
</div>
<div class="status-card status-running">
<div class="status-count" id="containers-running-count">0</div>
<div class="status-label">Running</div>
</div>
<div class="status-card status-stopped">
<div class="status-count" id="containers-stopped-count">0</div>
<div class="status-label">Stopped</div>
</div>
<div class="status-card status-images">
<div class="status-count" id="images-count">0</div>
<div class="status-label">Total Images</div>
</div>
</div>
<div class="system-info-card">
<h3>System Info</h3>
<div class="system-info-grid">
<div class="info-item">
<div class="info-label">Docker Version</div>
<div class="info-value" id="docker-version">-</div>
</div>
<div class="info-item">
<div class="info-label">OS / Architecture</div>
<div class="info-value" id="docker-os">-</div>
</div>
<div class="info-item">
<div class="info-label">CPUs</div>
<div class="info-value" id="docker-cpus">-</div>
</div>
<div class="info-item">
<div class="info-label">Memory</div>
<div class="info-value" id="docker-memory">-</div>
</div>
<div class="info-item">
<div class="info-label">Kernel Version</div>
<div class="info-value" id="docker-kernel">-</div>
</div>
<div class="info-item">
<div class="info-label">Server Version</div>
<div class="info-value" id="docker-server">-</div>
</div>
</div>
</div>
</div>
<div id="containers" class="tab-content">
<h2>Containers</h2>
<div id="containers-list" class="table-container"></div>
</div>
<div id="images" class="tab-content">
<h2>Images</h2>
<div class="pull-section">
<input type="text" id="pull-input" placeholder="Image name (e.g., nginx:latest)" class="pull-input">
<button id="pull-btn" class="btn btn-primary">Pull</button>
<div id="pull-progress" class="pull-progress" style="display: none;"></div>
</div>
<div id="images-list" class="table-container"></div>
</div>
</main>
<!-- Logs Modal -->
<div id="logs-modal" class="modal" style="display: none;">
<div class="modal-content logs-modal-content">
<div class="modal-header">
<h3>Container Logs</h3>
<div class="logs-controls">
<select id="logs-tail" class="logs-tail-select">
<option value="50">Last 50 lines</option>
<option value="100" selected>Last 100 lines</option>
<option value="200">Last 200 lines</option>
<option value="500">Last 500 lines</option>
</select>
<button id="logs-refresh" class="btn btn-small">Refresh</button>
</div>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body logs-modal-body">
<pre id="logs-content" class="logs-content"></pre>
</div>
</div>
</div>
<!-- Confirm Modal -->
<div id="confirm-modal" class="modal" style="display: none;">
<div class="modal-content confirm-modal-content">
<div class="modal-header">
<h3 id="confirm-title">Confirm Action</h3>
</div>
<div class="modal-body confirm-modal-body">
<p id="confirm-message"></p>
</div>
<div class="modal-footer">
<button id="confirm-cancel" class="btn">Cancel</button>
<button id="confirm-ok" class="btn btn-danger">Confirm</button>
</div>
</div>
</div>
<!-- Toast Notifications -->
<div id="toast" class="toast"></div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink