Admin protetto, dashboard KPI e aggiornamenti sito marketing.
Login admin con cambio password, metriche server (CPU/RAM/disco/banda), grafici e statistiche streaming; sezione piani ridimensionata. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
260
backend/public/admin.css
Normal file
260
backend/public/admin.css
Normal file
@@ -0,0 +1,260 @@
|
||||
:root {
|
||||
--red: #e53935;
|
||||
--red-dim: rgba(229, 57, 53, 0.15);
|
||||
--bg: #0a0a0e;
|
||||
--card: #14141c;
|
||||
--card-border: #2a2a36;
|
||||
--text: #f5f5f7;
|
||||
--muted: #9a9aad;
|
||||
--green: #43a047;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body.admin-body {
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: #0d0d12;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.admin-header h1 span { color: var(--red); }
|
||||
|
||||
.admin-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem 1rem;
|
||||
}
|
||||
|
||||
.admin-nav a,
|
||||
.admin-nav button {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-nav a:hover,
|
||||
.admin-nav a.active { color: var(--red); }
|
||||
|
||||
.admin-main {
|
||||
padding: 1.5rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.admin-flash {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--red-dim);
|
||||
border: 1px solid rgba(229, 57, 53, 0.35);
|
||||
}
|
||||
|
||||
.admin-section-title {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.kpi-card--accent {
|
||||
border-color: rgba(229, 57, 53, 0.45);
|
||||
background: linear-gradient(145deg, #1a1214 0%, var(--card) 60%);
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.kpi-sub {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.kpi-value--live { color: var(--red); }
|
||||
|
||||
.charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chart-card h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.admin-panels {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.admin-panels { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.65rem 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge--live { background: var(--red); color: #fff; }
|
||||
.badge--connecting { background: #ff9800; color: #111; }
|
||||
.badge--paused { background: #555; color: #fff; }
|
||||
|
||||
.team-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.team-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.55rem 0;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.team-list a { color: var(--text); text-decoration: none; }
|
||||
.team-list a:hover { color: var(--red); }
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
.empty { color: var(--muted); font-size: 0.9rem; margin: 0; }
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: #2a2a36;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--red);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-bar--ok span { background: var(--green); }
|
||||
|
||||
.disk-row {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.disk-row:last-child { margin-bottom: 0; }
|
||||
|
||||
.disk-row header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
Reference in New Issue
Block a user