add_server_modal.html•7.2 kB
<!DOCTYPE html>
<html>
<head>
<title>Sectional MCP Panel - Add Server Modal</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal {
background-color: white;
border-radius: 5px;
width: 600px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 20px;
}
.close-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
.modal-body {
padding: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-control {
width: 100%;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
box-sizing: border-box;
}
.form-select {
width: 100%;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
box-sizing: border-box;
}
textarea.form-control {
min-height: 80px;
}
.modal-footer {
padding: 15px;
border-top: 1px solid #dee2e6;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.btn {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-primary {
background-color: #0d6efd;
color: white;
}
.tab-container {
margin-top: 15px;
}
.tab-header {
display: flex;
border-bottom: 1px solid #dee2e6;
}
.tab-btn {
padding: 10px 15px;
background: none;
border: none;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-btn.active {
border-bottom: 2px solid #0d6efd;
color: #0d6efd;
}
.tab-content {
padding: 15px 0;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-header">
<h2>Add New Server</h2>
<button class="close-btn">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="section">Section</label>
<select class="form-select" id="section">
<option value="1">Web Services</option>
<option value="2">Database Services</option>
</select>
</div>
<div class="form-group">
<label for="server-name">Server Name</label>
<input type="text" class="form-control" id="server-name" placeholder="Enter server name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Enter server description"></textarea>
</div>
<div class="tab-container">
<div class="tab-header">
<button class="tab-btn active">Runtime Definition</button>
<button class="tab-btn">Settings</button>
</div>
<div class="tab-content">
<div class="tab-pane active">
<div class="form-group">
<label for="runtime-type">Runtime Type</label>
<select class="form-select" id="runtime-type">
<option value="docker_image">Docker Image</option>
<option value="npx_command">NPX Command</option>
</select>
</div>
<div class="form-group">
<label for="command">Command/Image</label>
<input type="text" class="form-control" id="command" placeholder="e.g., nginx:latest">
</div>
<div class="form-group">
<label for="args">Arguments (one per line)</label>
<textarea class="form-control" id="args" placeholder="Enter command arguments"></textarea>
</div>
<div class="form-group">
<label for="ports">Ports</label>
<input type="text" class="form-control" id="ports" placeholder="e.g., 80:TCP, 443:TCP">
</div>
</div>
<div class="tab-pane">
<div class="form-group">
<label for="env-vars">Environment Variables (key=value, one per line)</label>
<textarea class="form-control" id="env-vars" placeholder="e.g., NODE_ENV=production"></textarea>
</div>
<div class="form-group">
<label for="cpu-limit">CPU Limit</label>
<input type="text" class="form-control" id="cpu-limit" placeholder="e.g., 0.5">
</div>
<div class="form-group">
<label for="memory-limit">Memory Limit (MB)</label>
<input type="text" class="form-control" id="memory-limit" placeholder="e.g., 256">
</div>
<div class="form-group">
<label for="restart-policy">Restart Policy</label>
<select class="form-select" id="restart-policy">
<option value="no">No</option>
<option value="on_failure">On Failure</option>
<option value="always">Always</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-primary">Add Server</button>
</div>
</div>
</body>
</html>