Compare commits
No commits in common. "d8086030918a3d6cbdf00ddf64f2b672cc9dbd88" and "1415f2a8f05c24ff26254a30e1a2b0fec92496d3" have entirely different histories.
d808603091
...
1415f2a8f0
|
|
@ -1,164 +1,112 @@
|
|||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Informacje</title>
|
||||
<style>
|
||||
:root { height: 100%; }
|
||||
html, body { height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; color: #000; overflow-x: hidden; background: #fdb515; }
|
||||
.viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
|
||||
.video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Informacje</title>
|
||||
<style>
|
||||
:root { height: 100%; }
|
||||
html, body { height: 100%; margin: 0; font-family: Helvetica, Arial; color: #000; }
|
||||
.viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
|
||||
.video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }
|
||||
|
||||
.info-bar {
|
||||
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;
|
||||
}
|
||||
body { background: #fdb515; }
|
||||
|
||||
#scroll-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-left: 100%;
|
||||
animation: scroll-left var(--duration, 20s) linear infinite;
|
||||
}
|
||||
.info-bar {
|
||||
flex: 0 0 15%;
|
||||
background: #fdb515;
|
||||
color: #000;
|
||||
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 {
|
||||
display: inline-block;
|
||||
width: var(--gap-width, 500px);
|
||||
}
|
||||
@keyframes scroll-left {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
#text-1, #text-2 {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.video-area video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-area video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
.info-bar, .info-bar .info-left, .info-bar .info-right {
|
||||
font-size: 5vh;
|
||||
font-weight:700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#scroll-content, .num-inline, #text-1, #text-2 {
|
||||
font-size: 5vh;
|
||||
font-weight:700;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.num-inline {
|
||||
display: inline-block;
|
||||
margin-left: 1vh;
|
||||
padding: 1.6vh 1.2vh;
|
||||
border: 0.4vh solid #000;
|
||||
border-radius: 0.8vh;
|
||||
background: transparent;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.num-inline {
|
||||
display: inline-block;
|
||||
margin-left: 1vh;
|
||||
padding: 1.6vh 1.2vh;
|
||||
border: 0.4vh solid #000;
|
||||
border-radius: 0.8vh;
|
||||
background: transparent;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.video-area { flex-basis: 70%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@keyframes scroll-left {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(var(--scroll-distance)); }
|
||||
}
|
||||
<script>
|
||||
async function fetchCurrent() {
|
||||
try {
|
||||
const r = await fetch('/current', { cache: 'no-store' });
|
||||
const j = await r.json();
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.video-area { flex-basis: 70%; }
|
||||
}
|
||||
</style>
|
||||
const nums = j.current || [];
|
||||
const waitingCount = j.waiting != null ? j.waiting : '0';
|
||||
|
||||
<script>
|
||||
const SPEED_FACTOR = 0.006;
|
||||
const CUSTOM_GAP_WIDTH = 1920;
|
||||
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}`;
|
||||
|
||||
function updateAnimation(scrollContentElement, combinedText) {
|
||||
|
||||
const tempElement = document.createElement('span');
|
||||
tempElement.style.whiteSpace = 'nowrap';
|
||||
tempElement.style.fontSize = '5vh';
|
||||
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;
|
||||
// Wstawienie tekstu do dolnego paska
|
||||
document.getElementById('info-bar-text-1').innerHTML = combinedText;
|
||||
// document.getElementById('info-bar-text-2').innerHTML = combinedText;
|
||||
} catch (e) {
|
||||
console.error('fetchCurrent error', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCurrent() {
|
||||
try {
|
||||
const r = await fetch('/current', { cache: 'no-store' });
|
||||
const j = await r.json();
|
||||
|
||||
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>
|
||||
window.addEventListener('load', () => {
|
||||
fetchCurrent();
|
||||
setInterval(fetchCurrent, 5000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<div class="viewport">
|
||||
<div class="video-area">
|
||||
<video id="bgvideo" autoplay loop muted playsinline>
|
||||
<source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
|
||||
</video>
|
||||
<video id="bgvideo" autoplay loop muted playsinline>
|
||||
<source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="info-bar">
|
||||
<div id="scroll-content">
|
||||
<span id="text-1">-</span>
|
||||
<span id="gap"> </span>
|
||||
<span id="text-2">-</span>
|
||||
</div>
|
||||
<div id="info-bar-text-1" class="info-left">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue