gru/voltage-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-02-04 14:55:40 +01:00
parent 64887698d2
commit 18c67fd728
4 changed files with 218 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
static/css/style.css
View File

@@ -5,6 +5,7 @@
--text-main: #c9d1d9;
--blue-accent: #58a6ff;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
@@ -13,12 +14,15 @@ body {
margin: 0;
overflow-x: hidden;
}
/* Siatka wskaźników (gauges) */
.gauge-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.gauge-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
@@ -26,41 +30,53 @@ body {
padding: 10px 5px;
text-align: center;
}
.gauge-canvas-container {
max-width: 80px;
margin: 0 auto;
}
.gauge-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--blue-accent);
margin-top: 2px;
}
.voltage-value {
font-size: 1.1rem;
font-weight: 800;
color: #ffffff;
}
/* Wybór zakresu czasu - Poprawiona responsywność */
.time-btn-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding-bottom: 10px;
flex-wrap: wrap; /* Pozwala na zawijanie przycisków do nowej linii */
gap: 8px;
padding: 10px 0;
justify-content: center;
}
.time-btn {
font-size: 0.75rem !important;
padding: 5px 12px !important;
padding: 6px 12px !important;
white-space: nowrap;
border-color: var(--border-color) !important;
border: 1px solid var(--border-color) !important;
color: var(--blue-accent) !important;
background: transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.time-btn.active {
background-color: #1f6feb !important;
color: white !important;
border-color: #1f6feb !important;
}
/* Wykres główny */
.main-chart-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
@@ -69,15 +85,99 @@ body {
height: 55vh;
min-height: 350px;
}
footer { padding: 20px 0; opacity: 0.7; }
@media (max-width: 576px) {
.voltage-value { font-size: 0.95rem; }
.main-chart-card { height: 50vh; padding: 10px; }
/* Lista zdarzeń (logi) */
.events-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 15px;
margin-top: 15px;
}
.events-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.event-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #30363d; }
.event-item:last-child { border-bottom: none; }
.event-badge { width: 12px; height: 12px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; }
.event-time { font-family: monospace; font-size: 0.85rem; color: #8b949e; margin-right: 15px; }
.event-desc { font-size: 0.9rem; color: #c9d1d9; }
.no-events { color: #8b949e; font-style: italic; text-align: center; padding: 10px; }
.event-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
}
.event-item:last-child {
border-bottom: none;
}
.event-badge {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
}
.event-time {
font-family: monospace;
font-size: 0.85rem;
color: #8b949e;
margin-right: 15px;
white-space: nowrap;
}
.event-desc {
font-size: 0.9rem;
color: var(--text-main);
}
.no-events {
color: #8b949e;
font-style: italic;
text-align: center;
padding: 10px;
}
footer {
padding: 20px 0;
opacity: 0.7;
text-align: center;
}
@media (max-width: 576px) {
.voltage-value {
font-size: 0.95rem;
}
.main-chart-card {
height: 45vh;
padding: 10px;
}
.time-btn {
flex: 1 1 calc(30% - 10px);
min-width: 70px;
font-size: 0.7rem !important;
padding: 8px 4px !important;
}
.event-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.event-badge {
margin-bottom: 4px;
}
.event-time {
margin-right: 0;
}
}
.event-warning {
background-color: rgba(255, 187, 51, 0.1);
border: 1px dashed #ffbb33;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
text-align: center;
color: #ffbb33;
}