jensandClaude Sonnet 4.6
083bc97651
- SVG fire group with 3 layered flame paths (red/orange/yellow gradients) - CSS keyframe flicker animations with different timings per flame layer - JS controls fire opacity and scaleY proportional to heater power - Fix buildStep() reading grain_mass/water_mass from nested step.pot instead of flat step keys, matching the JSON structure Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi
318 lines
7.7 KiB
CSS
318 lines
7.7 KiB
CSS
:root {
|
|
--bg: #121212;
|
|
--surface: #1e1e1e;
|
|
--surface-2: #2a2a2a;
|
|
--border: #383838;
|
|
--text: #e0e0e0;
|
|
--text-muted: #9e9e9e;
|
|
--accent: #ff7043;
|
|
--green: #4caf50;
|
|
--green-dim: #1b5e20;
|
|
--orange: #ffa726;
|
|
--orange-dim: #6d3b00;
|
|
--red: #f44336;
|
|
--led-off: #444444;
|
|
--led-green: var(--green);
|
|
--led-green-dim: var(--green-dim);
|
|
--led-orange: var(--orange);
|
|
--led-orange-dim: var(--orange-dim);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
margin: 0;
|
|
padding: 0.5em 1em 4em 1em;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* --- Inputs & buttons --- */
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
color: var(--text);
|
|
padding: 0.3em 0.5em;
|
|
}
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
button {
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
color: var(--text);
|
|
padding: 0.3em 0.8em;
|
|
cursor: pointer;
|
|
transition: background 0.1s, border-color 0.1s;
|
|
}
|
|
button:hover:not(:disabled) {
|
|
background: #333;
|
|
border-color: #555;
|
|
}
|
|
button:disabled { opacity: 0.4; cursor: default; }
|
|
|
|
/* --- Header --- */
|
|
|
|
header#connection-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
padding: 0.6em 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.status-connected { color: var(--green); font-weight: bold; }
|
|
.status-disconnected { color: var(--text-muted); }
|
|
|
|
/* --- Sud controls section --- */
|
|
|
|
#sud-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4em;
|
|
padding-left: 1em;
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
|
|
/* --- Transport buttons (circular, coloured) --- */
|
|
|
|
.transport-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: filter 0.15s, box-shadow 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
.transport-btn:not(:disabled):hover {
|
|
filter: brightness(1.25);
|
|
box-shadow: 0 0 10px rgba(255,255,255,0.18);
|
|
}
|
|
.transport-btn:disabled { opacity: 0.35; cursor: default; }
|
|
|
|
.transport-start { background: var(--green); color: #fff; }
|
|
.transport-pause { background: var(--orange); color: #fff; }
|
|
.transport-stop { background: var(--red); color: #fff; }
|
|
|
|
/* --- LCD panel --- */
|
|
|
|
#lcd-panel {
|
|
display: grid;
|
|
grid-template-columns: 11em 6em 6em;
|
|
gap: 0.25em 1em;
|
|
max-width: 32em;
|
|
}
|
|
.lcd-row { display: contents; }
|
|
.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
.lcd-label { color: var(--text-muted); font-size: 0.9em; align-self: center; }
|
|
.lcd {
|
|
font-family: 'Courier New', 'Lucida Console', monospace;
|
|
font-size: 1.1em;
|
|
background: #091209;
|
|
border: 1px solid #2a6e2a;
|
|
padding: 0.15em 0.4em;
|
|
text-align: right;
|
|
color: #7dfa7d;
|
|
text-shadow: 0 0 6px rgba(100,255,100,0.45);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* --- LCD + pot row --- */
|
|
|
|
#lcd-pot-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1.5em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
/* --- Pot visualization --- */
|
|
|
|
#pot-view {
|
|
flex-shrink: 0;
|
|
}
|
|
#pot-svg {
|
|
width: 144px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Fire animations */
|
|
@keyframes flicker-1 {
|
|
0%, 100% { transform: scaleY(1.00) scaleX(1.00); }
|
|
25% { transform: scaleY(1.09) scaleX(0.93); }
|
|
50% { transform: scaleY(0.93) scaleX(1.06); }
|
|
75% { transform: scaleY(1.06) scaleX(0.96); }
|
|
}
|
|
@keyframes flicker-2 {
|
|
0%, 100% { transform: scaleY(0.95) scaleX(1.04); }
|
|
30% { transform: scaleY(1.10) scaleX(0.92); }
|
|
65% { transform: scaleY(0.91) scaleX(1.07); }
|
|
}
|
|
@keyframes flicker-3 {
|
|
0%, 100% { transform: scaleY(1.05) scaleX(0.95); }
|
|
40% { transform: scaleY(0.89) scaleX(1.08); }
|
|
70% { transform: scaleY(1.12) scaleX(0.91); }
|
|
}
|
|
|
|
.flame {
|
|
transform-box: fill-box;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
#flame-outer { animation: flicker-1 0.70s ease-in-out infinite; }
|
|
#flame-mid { animation: flicker-2 0.55s ease-in-out infinite 0.08s; }
|
|
#flame-inner { animation: flicker-3 0.45s ease-in-out infinite 0.15s; }
|
|
|
|
#fire-group {
|
|
transform-box: fill-box;
|
|
transform-origin: 50% 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
}
|
|
|
|
/* --- Tabs --- */
|
|
|
|
nav#tabs {
|
|
margin-top: 1em;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.tab-btn {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
color: var(--text-muted);
|
|
padding: 0.4em 1.1em;
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 1px;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: color 0.15s;
|
|
}
|
|
.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
|
|
.tab-btn.active {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-weight: bold;
|
|
border-color: var(--border);
|
|
border-bottom: 1px solid var(--surface);
|
|
}
|
|
|
|
.tab-content { display: none; padding: 1em 0; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* --- Manual tab panels --- */
|
|
|
|
.panel {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.8em 1.1em;
|
|
margin-bottom: 0.8em;
|
|
max-width: 30em;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.45);
|
|
}
|
|
.panel h3 {
|
|
margin: 0 0 0.5em 0;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--accent);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0.35em;
|
|
}
|
|
.panel label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6em;
|
|
margin: 0.4em 0;
|
|
}
|
|
.panel input[type="range"] { flex: 1; accent-color: var(--accent); }
|
|
.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
|
|
.panel input[type="number"] { width: 6em; }
|
|
|
|
#pot-reset-row { display: flex; align-items: center; gap: 0.6em; margin: 0.4em 0; }
|
|
|
|
/* --- Hidden --- */
|
|
.hidden { display: none !important; }
|
|
|
|
/* --- Progress tab: step plates --- */
|
|
|
|
#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }
|
|
|
|
.step-plate {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.55em 0.9em;
|
|
display: grid;
|
|
grid-template-columns: 1.4em 1fr auto;
|
|
gap: 0.2em 0.6em;
|
|
align-items: center;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
|
|
}
|
|
.step-plate .led {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--led-off);
|
|
border: 1px solid #555;
|
|
}
|
|
.step-plate .title {
|
|
font-weight: bold;
|
|
grid-column: 2;
|
|
}
|
|
.step-plate .remaining {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
font-family: 'Courier New', monospace;
|
|
color: var(--accent);
|
|
}
|
|
.step-plate .field {
|
|
color: var(--text-muted);
|
|
font-size: 0.88em;
|
|
}
|
|
.step-plate .span2 { grid-column: span 2; }
|
|
|
|
/* --- Message dialog --- */
|
|
|
|
#sud-message-dialog {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1.2em 1.6em;
|
|
max-width: 24em;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.7);
|
|
}
|
|
#sud-message-dialog::backdrop { background: rgba(0,0,0,0.65); }
|
|
#sud-message-dialog form { margin-top: 1em; text-align: right; }
|
|
|
|
/* --- Footer --- */
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0; left: 0; right: 0;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
padding: 0.35em 1em;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.82em;
|
|
color: var(--text-muted);
|
|
}
|