thek4n/pump_controller_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): increase pump state led

Browse Source
This commit is contained in:
thek4n 2026-06-07 19:31:16 +03:00
parent bdfbdbd808
commit 373152e7a6
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/index.html
View File

@ -68,11 +68,19 @@
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
.pressure-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: -5px auto 20px;
}
.pressure-value { .pressure-value {
text-align: center; text-align: center;
font-size: 2.1rem; font-size: 2.1rem;
font-weight: 700; font-weight: 700;
margin: -5px auto 20px; margin: 0;
color: #eef4ff; color: #eef4ff;
background: rgba(0, 0, 0, 0.65); background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@ -259,13 +267,13 @@
.pump-state { .pump-state {
text-align: center; text-align: center;
margin: 0.5rem auto 1.2rem auto; margin: 0;
padding: 0.4rem 0.8rem; padding: 12px 24px;
width: fit-content; width: fit-content;
border-radius: 20px; border-radius: 60px;
background: #33373b; background: #33373b;
font-weight: 700; font-weight: 700;
font-size: 0.85rem; font-size: 1.1rem;
letter-spacing: 1px; letter-spacing: 1px;
color: #959ea6; color: #959ea6;
font-family: monospace; font-family: monospace;
@ -286,7 +294,7 @@
box-shadow: 0 0 0 0 rgba(0, 168, 107, 0.4); box-shadow: 0 0 0 0 rgba(0, 168, 107, 0.4);
} }
70% { 70% {
box-shadow: 0 0 0 6px rgba(0, 168, 107, 0); box-shadow: 0 0 0 8px rgba(0, 168, 107, 0);
} }
100% { 100% {
box-shadow: 0 0 0 0 rgba(0, 168, 107, 0); box-shadow: 0 0 0 0 rgba(0, 168, 107, 0);
@ -309,9 +317,11 @@
<canvas id="manometerCanvas" width="500" height="500"></canvas> <canvas id="manometerCanvas" width="500" height="500"></canvas>
</div> </div>
<div class="value-wrapper"> <div class="value-wrapper">
<div class="pressure-value" id="currentPressureDisplay">0.00 атм</div> <div class="pressure-row">
<div class="pressure-value" id="currentPressureDisplay">0.00 атм</div>
<div class="pump-state" id="currentPumpState"></div>
</div>
</div> </div>
<div class="pump-state" id="currentPumpState"></div>
<div class="sliders-panel"> <div class="sliders-panel">
<div class="slider-group"> <div class="slider-group">