dashboard_mockup.html•9.65 kB
<!DOCTYPE html>
<html>
<head>
<title>Sectional MCP Panel - Dashboard Mockup</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
.container {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
background-color: #343a40;
color: white;
padding: 20px;
}
.sidebar-header {
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #495057;
}
.sidebar-menu {
list-style: none;
padding: 0;
}
.sidebar-menu li {
margin-bottom: 15px;
}
.sidebar-menu a {
color: #adb5bd;
text-decoration: none;
display: block;
padding: 8px 10px;
border-radius: 5px;
}
.sidebar-menu a.active {
background-color: #0d6efd;
color: white;
}
.sidebar-menu a:hover:not(.active) {
background-color: #495057;
color: white;
}
.main-content {
flex: 1;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #dee2e6;
}
.header h1 {
margin: 0;
font-size: 24px;
}
.btn-group {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-primary {
background-color: #0d6efd;
color: white;
}
.btn-outline-primary {
background-color: transparent;
border: 1px solid #0d6efd;
color: #0d6efd;
}
.section-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
border-left: 5px solid #0d6efd;
}
.section-header {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #dee2e6;
}
.section-header h2 {
margin: 0;
font-size: 18px;
}
.section-body {
padding: 15px;
}
.section-description {
color: #6c757d;
margin-bottom: 15px;
}
.server-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 10px;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.server-running {
border-left: 5px solid #198754;
}
.server-stopped {
border-left: 5px solid #dc3545;
}
.server-info h3 {
margin: 0 0 5px 0;
font-size: 16px;
}
.server-description {
color: #6c757d;
font-size: 14px;
}
.badge {
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
color: white;
}
.badge-running {
background-color: #198754;
}
.badge-stopped {
background-color: #dc3545;
}
.server-actions {
display: flex;
gap: 5px;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.btn-success {
background-color: #198754;
color: white;
}
.btn-danger {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebar-header">Sectional MCP Panel</div>
<ul class="sidebar-menu">
<li><a href="#" class="active">Dashboard</a></li>
<li><a href="#">Sections</a></li>
<li><a href="#">Servers</a></li>
<li><a href="#">Tasks</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
<div class="main-content">
<div class="header">
<h1>Dashboard</h1>
<div class="btn-group">
<button class="btn btn-outline-primary">Refresh</button>
<button class="btn btn-primary">Add Section</button>
</div>
</div>
<!-- Section 1 -->
<div class="section-card">
<div class="section-header">
<h2>Web Services</h2>
<div class="btn-group">
<button class="btn btn-sm btn-success">Start All</button>
<button class="btn btn-sm btn-danger">Stop All</button>
<button class="btn btn-sm btn-outline-primary">Add Server</button>
</div>
</div>
<div class="section-body">
<div class="section-description">Frontend and backend web services</div>
<!-- Server 1 -->
<div class="server-card server-running">
<div class="server-info">
<h3>Nginx Web Server</h3>
<span class="badge badge-running">Running</span>
<div class="server-description">Frontend web server</div>
</div>
<div class="server-actions">
<button class="btn btn-sm btn-success" disabled>Start</button>
<button class="btn btn-sm btn-danger">Stop</button>
<button class="btn btn-sm btn-outline-primary">Edit</button>
</div>
</div>
<!-- Server 2 -->
<div class="server-card server-running">
<div class="server-info">
<h3>Node.js API</h3>
<span class="badge badge-running">Running</span>
<div class="server-description">Backend API service</div>
</div>
<div class="server-actions">
<button class="btn btn-sm btn-success" disabled>Start</button>
<button class="btn btn-sm btn-danger">Stop</button>
<button class="btn btn-sm btn-outline-primary">Edit</button>
</div>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="section-card">
<div class="section-header">
<h2>Database Services</h2>
<div class="btn-group">
<button class="btn btn-sm btn-success">Start All</button>
<button class="btn btn-sm btn-danger">Stop All</button>
<button class="btn btn-sm btn-outline-primary">Add Server</button>
</div>
</div>
<div class="section-body">
<div class="section-description">Database and cache services</div>
<!-- Server 3 -->
<div class="server-card server-running">
<div class="server-info">
<h3>PostgreSQL Database</h3>
<span class="badge badge-running">Running</span>
<div class="server-description">Main database server</div>
</div>
<div class="server-actions">
<button class="btn btn-sm btn-success" disabled>Start</button>
<button class="btn btn-sm btn-danger">Stop</button>
<button class="btn btn-sm btn-outline-primary">Edit</button>
</div>
</div>
<!-- Server 4 -->
<div class="server-card server-stopped">
<div class="server-info">
<h3>Redis Cache</h3>
<span class="badge badge-stopped">Stopped</span>
<div class="server-description">In-memory cache service</div>
</div>
<div class="server-actions">
<button class="btn btn-sm btn-success">Start</button>
<button class="btn btn-sm btn-danger" disabled>Stop</button>
<button class="btn btn-sm btn-outline-primary">Edit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>