miklo
/
queue-manager
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

base: miklo:d8086030918a3d6cbdf00ddf64f2b672cc9dbd88
Branches Tags
miklo:master
miklo:index
..
compare: miklo:1415f2a8f05c24ff26254a30e1a2b0fec92496d3
Branches Tags
miklo:master
miklo:index

No commits in common. "d8086030918a3d6cbdf00ddf64f2b672cc9dbd88" and "1415f2a8f05c24ff26254a30e1a2b0fec92496d3" have entirely different histories.
d808603091 ... 1415f2a8f0

1 changed files with 92 additions and 144 deletions
Show Stats Expand all files Collapse all files

228
src/templates/infokiosk.html
View File

@ -1,164 +1,112 @@
<!doctype html> <!doctype html>
<html lang="pl"> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Informacje</title> <title>Informacje</title>
<style> <style>
:root { height: 100%; } :root { height: 100%; }
html, body { height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; color: #000; overflow-x: hidden; background: #fdb515; } html, body { height: 100%; margin: 0; font-family: Helvetica, Arial; color: #000; }
.viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; } .viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
.video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; } .video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }
.info-bar { body { background: #fdb515; }
flex: 0 0 15%;
background: #fdb515;
color: #000;
height: 15vh;
min-height: 50px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
padding-left: 4vh;
padding-right: 4vh;
}
#scroll-content { .info-bar {
display: inline-block; flex: 0 0 15%;
white-space: nowrap; background: #fdb515;
margin-left: 100%; color: #000;
animation: scroll-left var(--duration, 20s) linear infinite; display: flex;
} // display: block;
width: 300% ;
align-items: center;
vertical-align:middle;
box-sizing: border-box;
height: 15vh;
min-height: 50px;
padding-left: 4vh;
padding-right: 4vh;
overflow: hidden;
white-space: nowrap;
animation: scroll-left 20s linear infinite;
}
#gap { @keyframes scroll-left {
display: inline-block; from { transform: translateX(100%); }
width: var(--gap-width, 500px); to { transform: translateX(-100%); }
} }
#text-1, #text-2 { .video-area video {
display: inline-block; position: absolute;
white-space: nowrap; top: 50%;
} left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: auto;
object-fit: cover;
}
.video-area video { .info-bar, .info-bar .info-left, .info-bar .info-right {
position: absolute; font-size: 5vh;
top: 50%; font-weight:700;
left: 50%; line-height: 1;
transform: translate(-50%, -50%); }
height: 100%;
width: auto;
object-fit: cover;
}
#scroll-content, .num-inline, #text-1, #text-2 { .num-inline {
font-size: 5vh; display: inline-block;
font-weight:700; margin-left: 1vh;
line-height: 1; padding: 1.6vh 1.2vh;
vertical-align: middle; border: 0.4vh solid #000;
} border-radius: 0.8vh;
background: transparent;
line-height: 1;
vertical-align: middle;
}
.num-inline { @media (max-width: 700px) {
display: inline-block; .video-area { flex-basis: 70%; }
margin-left: 1vh; }
padding: 1.6vh 1.2vh; </style>
border: 0.4vh solid #000;
border-radius: 0.8vh;
background: transparent;
line-height: 1;
vertical-align: middle;
}
@keyframes scroll-left { <script>
from { transform: translateX(0); } async function fetchCurrent() {
to { transform: translateX(var(--scroll-distance)); } try {
} const r = await fetch('/current', { cache: 'no-store' });
const j = await r.json();
@media (max-width: 700px) { const nums = j.current || [];
.video-area { flex-basis: 70%; } const waitingCount = j.waiting != null ? j.waiting : '0';
}
</style>
<script> const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę na queue.hswro.org';
const SPEED_FACTOR = 0.006; const numsFormatted = nums.map(n => `<span class="num-inline">${n}</span>`).join(' ');
const CUSTOM_GAP_WIDTH = 1920; const numList = nums.length > 0 ? `| Zapraszamy z numerami: ${numsFormatted}` : '';
const combinedText = `${infoText} | Oczekujących: ${waitingCount} ${numList}`;
function updateAnimation(scrollContentElement, combinedText) { // Wstawienie tekstu do dolnego paska
document.getElementById('info-bar-text-1').innerHTML = combinedText;
const tempElement = document.createElement('span'); // document.getElementById('info-bar-text-2').innerHTML = combinedText;
tempElement.style.whiteSpace = 'nowrap'; } catch (e) {
tempElement.style.fontSize = '5vh'; console.error('fetchCurrent error', e);
tempElement.style.fontWeight = '700';
tempElement.innerHTML = combinedText;
document.body.appendChild(tempElement);
const contentWidth = tempElement.offsetWidth;
document.body.removeChild(tempElement);
const totalScrollDistance = contentWidth + CUSTOM_GAP_WIDTH;
const duration = totalScrollDistance * SPEED_FACTOR;
scrollContentElement.style.setProperty('--scroll-distance', `-${totalScrollDistance}px`);
scrollContentElement.style.setProperty('--duration', `${duration}s`);
document.getElementById('gap').style.setProperty('--gap-width', `${CUSTOM_GAP_WIDTH}px`);
document.getElementById('text-1').innerHTML = combinedText;
document.getElementById('text-2').innerHTML = combinedText;
} }
}
async function fetchCurrent() { window.addEventListener('load', () => {
try { fetchCurrent();
const r = await fetch('/current', { cache: 'no-store' }); setInterval(fetchCurrent, 5000);
const j = await r.json(); });
</script>
const nums = j.current || [];
const waitingCount = j.waiting != null ? j.waiting : '0';
const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę na queue.hswro.org';
const numsFormatted = nums.map(n => `<span class="num-inline">${n}</span>`).join(' ');
const numList = nums.length > 0 ? `| Zapraszamy z numerami: ${numsFormatted}` : '';
const combinedText = `${infoText} | Oczekujących: ${waitingCount} ${numList}`;
const scrollContentElement = document.getElementById('scroll-content');
scrollContentElement.style.animationPlayState = 'paused';
updateAnimation(scrollContentElement, combinedText);
setTimeout(() => {
scrollContentElement.style.animationPlayState = 'running';
}, 50);
} catch (e) {
console.error('fetchCurrent error', e);
const scrollContentElement = document.getElementById('scroll-content');
scrollContentElement.style.animationPlayState = 'running';
}
}
window.addEventListener('load', () => {
fetchCurrent();
setInterval(fetchCurrent, 5000);
});
</script>
</head> </head>
<body> <body>
<div class="viewport"> <div class="viewport">
<div class="video-area"> <div class="video-area">
<video id="bgvideo" autoplay loop muted playsinline> <video id="bgvideo" autoplay loop muted playsinline>
<source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4"> <source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
</video> </video>
</div> </div>
<div class="info-bar"> <div class="info-bar">
<div id="scroll-content"> <div id="info-bar-text-1" class="info-left">-</div>
<span id="text-1">-</span>
<span id="gap">&nbsp;</span>
<span id="text-2">-</span>
</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>