PVR/overzeuknup.top
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Correction css

Browse Source
This commit is contained in:
Gabriel
2025-06-11 14:53:16 +02:00
parent 08e3473670
commit 3e01807c33
1 changed files with 112 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
static/stocks.html
View File

@@ -2,24 +2,32 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock alcool</title> <title>Stock alcool</title>
<script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: 100%; height: 100%;
overflow: hidden;
font-family: sans-serif;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center;
background: #f0f0f0;
font-family: sans-serif;
} }
#gauge-container { #gauge-container {
flex: 1; flex: 1;
width: 90vw;
max-width: 400px;
aspect-ratio: 2 / 1;
position: relative; position: relative;
width: 100%; background: white;
height: 100%; border-radius: 8px 8px 0 0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} }
#gauge-canvas { #gauge-canvas {
@@ -33,33 +41,27 @@ html, body {
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 2rem; font-size: 1.5rem;
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.8);
padding: 0.5rem 1rem; padding: 0.3rem 0.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
pointer-events: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="gauge-container"> <div id="gauge-container">
<canvas id="gauge-canvas"></canvas> <canvas id="gauge-canvas"></canvas>
<div id="value">Chargement…</div> <div id="value">Chargement…</div>
</div> </div>
<script> <script>
const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view';
const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
const opts = { const opts = {
angle: 0.15, angle: 0.15,
lineWidth: 0.44, lineWidth: 0.44,
radiusScale: 1, radiusScale: 1,
pointer: { pointer: { length: 0.6, strokeWidth: 0.035, color: '#000' },
length: 0.6,
strokeWidth: 0.035,
color: '#000'
},
limitMax: false, limitMax: false,
limitMin: false, limitMin: false,
colorStart: '#4caf50', colorStart: '#4caf50',
@@ -71,43 +73,34 @@ html, body {
const container = document.getElementById('gauge-container'); const container = document.getElementById('gauge-container');
const canvas = document.getElementById('gauge-canvas'); const canvas = document.getElementById('gauge-canvas');
let gauge; let gauge;
function initGauge() { function initGauge() {
const { width, height } = container.getBoundingClientRect(); const { width, height } = container.getBoundingClientRect();
canvas.width = width * window.devicePixelRatio; canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio; canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px'; canvas.style.width = width + 'px';
canvas.style.height = height + 'px'; canvas.style.height = height + 'px';
if (!gauge) {
gauge = new Gauge(canvas).setOptions(opts); gauge = new Gauge(canvas).setOptions(opts);
gauge.maxValue = 100; gauge.maxValue = 100;
gauge.setMinValue(0); gauge.setMinValue(0);
gauge.animationSpeed = 32; gauge.animationSpeed = 32;
} }
function updateGaugeColor(value) { }
const color = getColorForValue(value);
function updateGaugeColor(v) {
const color = v < 20 ? '#f44336' : v <= 80 ? '#ff9800' : '#4caf50';
opts.colorStart = color; opts.colorStart = color;
opts.colorStop = color; opts.colorStop = color;
gauge.setOptions(opts); gauge.setOptions(opts);
} }
function getColorForValue(value) { async function fetchAndUpdate() {
if (value < 20) {
return '#f44336'; // Rouge
} else if (value <= 80) {
return '#ff9800'; // Orange/Jaune
} else {
return '#4caf50'; // Vert
}
}
async function updateGauge() {
try { try {
const res = await fetch(DATA_URL, {cache:'no-store'}); const res = await fetch(DATA_URL, {cache:'no-store'});
if (!res.ok) throw new Error(res.status); if (!res.ok) throw new Error(res.status);
const text = await res.text(); const pct = Math.min(100, Math.max(0, parseFloat(await res.text())));
const pct = Math.min(100, Math.max(0, parseFloat(text)));
updateGaugeColor(pct); updateGaugeColor(pct);
gauge.set(pct); gauge.set(pct);
document.getElementById('value').textContent = pct.toFixed(1) + ' %'; document.getElementById('value').textContent = pct.toFixed(1) + ' %';
@@ -117,21 +110,14 @@ html, body {
} }
} }
window.addEventListener('load', () => { function refresh() {
initGauge(); initGauge();
updateGauge(); fetchAndUpdate();
setInterval(updateGauge, 30_000);
});
window.addEventListener('resize', () => {
const last = gauge ? gauge.value : 0;
initGauge();
if (gauge && last !== undefined) {
updateGaugeColor(last);
gauge.set(last);
} }
});
</script>
window.addEventListener('load', () => { refresh(); setInterval(fetchAndUpdate, 30000); });
window.addEventListener('resize', refresh);
</script>
</body> </body>
</html> </html>