/* Sidebar Navigation */ .sidebar { width: 250px; background:
var(--bg-card); padding: 20px; border-right: 1px solid var(--border);
display: flex; flex-direction: column; } .logo { font-size: 24px;
font-weight: bold; margin-bottom: 40px; color: var(--accent);
letter-spacing: 1px; } .logo span { color: var(--text-main); } .nav-item {
padding: 12px 15px; margin-bottom: 8px; border-radius: 8px; cursor:
pointer; color: var(--text-muted); transition: 0.2s; } .nav-item:hover,
.nav-item.active { background: rgba(59, 130, 246, 0.1); color:
var(--accent); } .nav-item.active { font-weight: 600; border-left: 3px
solid var(--accent); } /* Main Content */ .main { flex: 1; padding: 40px;
overflow-y: auto; } .header { display: flex; justify-content:
space-between; align-items: center; margin-bottom: 30px; } .header h1 {
font-size: 28px; font-weight: 600; } .system-badge { background: rgba(34,
197, 94, 0.1); color: var(--success); padding: 5px 12px; border-radius:
20px; font-size: 14px; font-weight: 500; border: 1px solid rgba(34, 197,
94, 0.2); } /* Grid Layout */ .dashboard-grid { display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
/* Cards */ .card { background: var(--bg-card); border-radius: 16px;
padding: 25px; border: 1px solid var(--border); box-shadow: 0 4px 6px -1px
rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content:
space-between; align-items: center; margin-bottom: 20px; } .card-title {
font-size: 16px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.5px; } /* Specific Widgets
Styles */ .metric-big { font-size: 36px; font-weight: bold; margin-bottom:
5px; } .metric-sub { font-size: 14px; color: var(--text-muted); } /*
Health Bars */ .health-row { margin-bottom: 15px; } .health-label {
display: flex; justify-content: space-between; margin-bottom: 5px;
font-size: 14px; } .progress-bg { height: 8px; background: #334155;
border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%;
border-radius: 4px; transition: width 0.5s ease; } /* Industrial Switches
*/ .switch-row { display: flex; justify-content: space-between;
align-items: center; padding: 15px 0; border-bottom: 1px solid
var(--border); } .switch-row:last-child { border-bottom: none; }
.switch-info h4 { font-size: 16px; margin-bottom: 4px; } .switch-info p {
font-size: 12px; color: var(--text-muted); } /* Toggle Button CSS */
.toggle { position: relative; width: 44px; height: 24px; } .toggle input {
opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor:
pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #334155;
transition: .4s; border-radius: 24px; } .slider:before { position:
absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); } input:checked
+ .slider:before { transform: translateX(20px); } /* Footer Info */
.specs-list { list-style: none; } .specs-list li { display: flex;
justify-content: space-between; padding: 8px 0; font-size: 14px;
border-bottom: 1px solid var(--border); } .specs-list li:last-child {
border-bottom: none; } .specs-val { font-weight: 600; color:
var(--text-main); } /* Status Dot */ .dot { height: 10px; width: 10px;
background-color: var(--text-muted); border-radius: 50%; display:
inline-block; margin-right: 5px; } .dot.green { background-color:
var(--success); box-shadow: 0 0 8px var(--success); } .dot.red {
background-color: var(--danger); }
Température CPU
42°C
Max supporté: 60°C
Alimentation (Input)
24.1 V
Plage: 12V - 24V DC
-
Compute Module
CM4 (BCM2711)
-
Sécurité
ATECC608 Actif
-
Accéléromètre
Stable
-
Horloge RTC
Sync
Ethernet (GbE)
IEEE1588 PTP Ready
192.168.1.45
NVMe Storage
J17 - Non détecté
--