797 lines
26 KiB
HTML
797 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home - Portainer</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-dark: #0f0f0f;
|
|
--bg-sidebar: #1a1a1a;
|
|
--bg-card: #1e1e1e;
|
|
--bg-hover: #252525;
|
|
--border-color: #2a2a2a;
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #888;
|
|
--portainer-blue: #13bef9;
|
|
--portainer-teal: #00bfa5;
|
|
--success: #4caf50;
|
|
--danger: #f44336;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Demo Banner */
|
|
.demo-banner {
|
|
background: #141414;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.demo-banner a {
|
|
color: var(--portainer-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Main Layout */
|
|
.container {
|
|
display: flex;
|
|
height: calc(100vh - 33px);
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: var(--bg-sidebar);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo-icon {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: white;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.logo-icon span {
|
|
color: var(--portainer-teal);
|
|
}
|
|
|
|
.logo-badge {
|
|
font-size: 9px;
|
|
color: var(--portainer-teal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.nav-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nav-header {
|
|
padding: 8px 16px;
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--bg-hover);
|
|
color: var(--portainer-blue);
|
|
border-left: 3px solid var(--portainer-blue);
|
|
padding-left: 13px;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 18px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-arrow {
|
|
margin-left: auto;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Main Content */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--portainer-blue);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Environment Card */
|
|
.env-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.env-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.env-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: #1da1f2;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.env-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.env-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.env-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.env-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
background: rgba(76, 175, 80, 0.15);
|
|
color: var(--success);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.env-status::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--success);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.env-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.env-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.env-meta-item span {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.env-path {
|
|
color: var(--text-secondary);
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Stats Row */
|
|
.env-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.stat-icon {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.container-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-dot.running {
|
|
background: var(--success);
|
|
}
|
|
|
|
.status-dot.stopped {
|
|
background: var(--danger);
|
|
}
|
|
|
|
/* Environment Actions */
|
|
.env-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.btn {
|
|
height: 36px;
|
|
padding: 0 16px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: white;
|
|
color: #000;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.connection-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.connection-status::before {
|
|
content: '✕';
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Filters Bar */
|
|
.filters-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-dropdown {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
height: 36px;
|
|
padding: 0 16px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.search-box::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-refresh {
|
|
height: 36px;
|
|
padding: 0 16px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-refresh:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Card Header */
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-banner">
|
|
🔒 This is a dummy dashboard for showcase purposes only. <a href="/">← Back to Dashboard</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Left Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<div>
|
|
<div class="logo-icon">PORTAINER<span>.</span>IO</div>
|
|
<div class="logo-badge">Community Edition</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<div class="nav-item active">
|
|
<span class="nav-icon">🏠</span>
|
|
<span>Home</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-header">Environment: / None selected</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-header">Administration</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">👤</span>
|
|
<span>User-related</span>
|
|
<span class="nav-arrow">▼</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">🖥️</span>
|
|
<span>Environment-related</span>
|
|
<span class="nav-arrow">▼</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">📦</span>
|
|
<span>Registries</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">📋</span>
|
|
<span>Logs</span>
|
|
<span class="nav-arrow">▼</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">🔔</span>
|
|
<span>Notifications</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-icon">⚙️</span>
|
|
<span>Settings</span>
|
|
<span class="nav-arrow">▼</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
Community Edition 2.21.3 LTS
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="content">
|
|
<div class="page-header">
|
|
<h1 class="page-title">
|
|
Home
|
|
<span style="color: var(--portainer-blue); cursor: pointer;">↻</span>
|
|
</h1>
|
|
<div class="page-actions">
|
|
<button class="icon-btn">🔔</button>
|
|
<button class="icon-btn">❓</button>
|
|
<div class="user-menu">
|
|
<div class="user-avatar">A</div>
|
|
<span>admin</span>
|
|
<span>▼</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environments Section -->
|
|
<div class="env-card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span style="font-size: 20px;">🖥️</span>
|
|
Environments
|
|
</div>
|
|
<div style="margin-left: auto; display: flex; gap: 8px;">
|
|
<button class="btn-refresh">↻ Refresh</button>
|
|
<button class="btn-refresh">⬇ Kubectl</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-subtitle" style="margin-bottom: 16px;">
|
|
Click on an environment to manage
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="filters-bar">
|
|
<select class="filter-dropdown">
|
|
<option>Platform</option>
|
|
</select>
|
|
<select class="filter-dropdown">
|
|
<option>Connection Type</option>
|
|
</select>
|
|
<select class="filter-dropdown">
|
|
<option>Status</option>
|
|
</select>
|
|
<select class="filter-dropdown">
|
|
<option>Tags</option>
|
|
</select>
|
|
<select class="filter-dropdown">
|
|
<option>Groups</option>
|
|
</select>
|
|
<select class="filter-dropdown">
|
|
<option>Agent Version</option>
|
|
</select>
|
|
<button style="background: transparent; border: none; color: var(--text-secondary); cursor: pointer;">
|
|
Clear all
|
|
</button>
|
|
<div style="margin-left: auto; display: flex; gap: 8px;">
|
|
<select class="filter-dropdown" style="min-width: 100px;">
|
|
<option>Sort By</option>
|
|
</select>
|
|
<button class="btn-icon">↕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment 1 -->
|
|
<div class="env-card" style="margin-bottom: 12px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
|
<div class="env-header" style="flex: 1; margin-bottom: 0;">
|
|
<div class="env-icon">🐳</div>
|
|
<div class="env-info">
|
|
<div class="env-name-row">
|
|
<span class="env-name">local</span>
|
|
<span class="env-status">Up</span>
|
|
<span style="color: var(--text-secondary); font-size: 12px;">↻ 2026-02-02 12:42:53</span>
|
|
<span style="color: var(--text-secondary); font-size: 12px;">Standalone 2.21.3</span>
|
|
<span class="env-path">/var/run/docker.sock</span>
|
|
</div>
|
|
<div class="env-meta">
|
|
<span class="env-meta-item">Group: <span>Unassigned</span></span>
|
|
<span class="env-meta-item">🏷️ No tags</span>
|
|
<span class="env-meta-item">⚡ Local</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="env-actions">
|
|
<button class="btn btn-primary">📡 Live connect</button>
|
|
<button class="btn-icon">✏️</button>
|
|
<div style="text-align: right;">
|
|
<div class="connection-status">Disconnected</div>
|
|
<button class="btn-icon" style="margin-top: 4px;">⚙️</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="env-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📚</span>
|
|
<span class="stat-value">12</span>
|
|
<span class="stat-label">stacks</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📦</span>
|
|
<span class="stat-value">24</span>
|
|
<span class="stat-label">containers</span>
|
|
</div>
|
|
<div class="container-status">
|
|
<span class="status-dot running"></span>
|
|
<span>18</span>
|
|
<span class="status-dot stopped"></span>
|
|
<span>2</span>
|
|
<span class="status-dot" style="background: #ff9800;"></span>
|
|
<span>0</span>
|
|
<span class="status-dot" style="background: #9c27b0;"></span>
|
|
<span>0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">💾</span>
|
|
<span class="stat-value">32</span>
|
|
<span class="stat-label">volumes</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">🖼️</span>
|
|
<span class="stat-value">87</span>
|
|
<span class="stat-label">images</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">🖥️</span>
|
|
<span class="stat-value">4</span>
|
|
<span class="stat-label">CPU</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">💽</span>
|
|
<span class="stat-value">7.8</span>
|
|
<span class="stat-label">GB RAM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment 2 -->
|
|
<div class="env-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
|
<div class="env-header" style="flex: 1; margin-bottom: 0;">
|
|
<div class="env-icon">🐳</div>
|
|
<div class="env-info">
|
|
<div class="env-name-row">
|
|
<span class="env-name">Compute-01</span>
|
|
<span class="env-status">Up</span>
|
|
<span style="color: var(--text-secondary); font-size: 12px;">↻ 2026-02-02 12:42:53</span>
|
|
<span style="color: var(--text-secondary); font-size: 12px;">Standalone 2.21.3</span>
|
|
<span class="env-path">agent.local:9001</span>
|
|
</div>
|
|
<div class="env-meta">
|
|
<span class="env-meta-item">Group: <span>Unassigned</span></span>
|
|
<span class="env-meta-item">🏷️ No tags</span>
|
|
<span class="env-meta-item">⚡ Agent 2.21.3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="env-actions">
|
|
<button class="btn btn-primary">📡 Live connect</button>
|
|
<button class="btn-icon">✏️</button>
|
|
<div style="text-align: right;">
|
|
<div class="connection-status">Disconnected</div>
|
|
<button class="btn-icon" style="margin-top: 4px;">⚙️</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="env-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📚</span>
|
|
<span class="stat-value">5</span>
|
|
<span class="stat-label">stacks</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">📦</span>
|
|
<span class="stat-value">16</span>
|
|
<span class="stat-label">containers</span>
|
|
</div>
|
|
<div class="container-status">
|
|
<span class="status-dot running"></span>
|
|
<span>14</span>
|
|
<span class="status-dot stopped"></span>
|
|
<span>1</span>
|
|
<span class="status-dot" style="background: #ff9800;"></span>
|
|
<span>0</span>
|
|
<span class="status-dot" style="background: #9c27b0;"></span>
|
|
<span>0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">💾</span>
|
|
<span class="stat-value">10</span>
|
|
<span class="stat-label">volumes</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">🖼️</span>
|
|
<span class="stat-value">24</span>
|
|
<span class="stat-label">images</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">🖥️</span>
|
|
<span class="stat-value">6</span>
|
|
<span class="stat-label">CPU</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">💽</span>
|
|
<span class="stat-value">8.2</span>
|
|
<span class="stat-label">GB RAM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|