Dashboard web FastAPI + Chart.js
- 4 vues : spectre temps reel, historique detections, background, timeline CPS - API REST : /api/status, /api/spectrum/current, /api/spectrum/difference, /api/background, /api/background/spectrum, /api/history, /api/cps/timeline - Frontend vanilla JS + Chart.js (pas de Node.js, leger pour Pi 4) - Moniteur modifie pour exporter son etat dans /data/monitor_state.json et le CPS dans /data/cps_log.jsonl chaque cycle - Nouveau conteneur Docker 'web' sur port 8080 - Theme sombre, calibration energie (E = 0.33 + 2.97 * canal) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jacquin Antoine
181
web/static/css/style.css
Normal file
181
web/static/css/style.css
Normal file
@ -0,0 +1,181 @@
|
||||
:root {
|
||||
--bg: #1a1a2e;
|
||||
--bg-card: #16213e;
|
||||
--text: #e0e0e0;
|
||||
--text-dim: #888;
|
||||
--accent: #0f3460;
|
||||
--accent-bright: #4fc3f7;
|
||||
--green: #4caf50;
|
||||
--red: #f44336;
|
||||
--yellow: #ff9800;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--bg-card);
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.2em;
|
||||
color: var(--accent-bright);
|
||||
}
|
||||
|
||||
#status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.status-dot.connected { background: var(--green); }
|
||||
|
||||
nav {
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
font-size: 0.95em;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover { background: rgba(255,255,255,0.1); }
|
||||
nav a.active { color: var(--accent-bright); border-bottom: 2px solid var(--accent-bright); }
|
||||
|
||||
main { padding: 16px; }
|
||||
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
.chart-container {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.9em;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
background: var(--accent);
|
||||
color: var(--text);
|
||||
border: 1px solid #444;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.controls button:hover { background: var(--accent-bright); color: #000; }
|
||||
|
||||
#isotopes-table, #peaks-table {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.isotope-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.isotope-row:last-child { border-bottom: none; }
|
||||
.isotope-name { color: var(--accent-bright); font-weight: bold; min-width: 80px; }
|
||||
.isotope-prob { color: var(--green); min-width: 60px; }
|
||||
.isotope-activity { color: var(--text-dim); }
|
||||
|
||||
.bg-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bg-stat {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg-stat-value { font-size: 1.4em; color: var(--accent-bright); }
|
||||
.bg-stat-label { font-size: 0.8em; color: var(--text-dim); }
|
||||
|
||||
.history-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.history-item:hover { background: #1e2a4a; }
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.history-date { font-weight: bold; color: var(--accent-bright); }
|
||||
.history-cps { color: var(--text-dim); }
|
||||
.history-isotopes { color: var(--green); font-size: 0.85em; }
|
||||
.history-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid #333; font-size: 0.9em; display: none; }
|
||||
.history-details.open { display: block; }
|
||||
|
||||
.peak-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.bg-stats { grid-template-columns: repeat(2, 1fr); }
|
||||
header { flex-direction: column; gap: 8px; }
|
||||
nav a { font-size: 0.85em; padding: 8px; }
|
||||
}
|
||||
Reference in New Issue
Block a user