add scroll
This commit is contained in:
miklo
parent
9e356b9da4
commit
1415f2a8f0
|
|
@ -80,7 +80,6 @@ def current_api():
|
|||
|
||||
|
||||
# Admin UI: start/reset system by providing count of tickets (1..N)
|
||||
# @app.route("/admin", methods=[":wGET", "POST"])
|
||||
def admin():
|
||||
db = get_db()
|
||||
|
||||
|
|
|
|||
|
|
@ -5,122 +5,108 @@
|
|||
<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;
|
||||
}
|
||||
: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;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
height:15vh;
|
||||
min-height:50px;
|
||||
padding-left:4vh;
|
||||
padding-right:4vh;
|
||||
}
|
||||
body { background: #fdb515; }
|
||||
|
||||
|
||||
.video-area video{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
height:100%;
|
||||
width:auto;
|
||||
object-fit:cover;
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.info-bar, .info-bar .info-left, .info-bar .info-right {
|
||||
font-size:5vh;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.info-left, .info-right{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
@keyframes scroll-left {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
.info-left{flex:1 1 70%; font-weight:700;}
|
||||
.info-right{flex:0 0 auto; margin-left:16px; font-weight:700;}
|
||||
|
||||
|
||||
.num-inline{
|
||||
display:inline-block;
|
||||
margin-left:1vh;
|
||||
padding:1.6vh 1.2vh;
|
||||
border:0.4vh solid #000;
|
||||
border-radius:0.8vh;
|
||||
background:transparent;
|
||||
font-weight:700;
|
||||
line-height:1;
|
||||
vertical-align:middle;
|
||||
.video-area video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width:700px){
|
||||
.video-area{flex-basis:70%}
|
||||
.info-bar, .info-bar .info-left, .info-bar .info-right {
|
||||
font-size: 5vh;
|
||||
font-weight:700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<script>
|
||||
|
||||
async function fetchCurrent(){
|
||||
try{
|
||||
const r = await fetch('/current', {cache: 'no-store'});
|
||||
async function fetchCurrent() {
|
||||
try {
|
||||
const r = await fetch('/current', { cache: 'no-store' });
|
||||
const j = await r.json();
|
||||
// update inline list in info bar
|
||||
const numList = document.getElementById('num-list');
|
||||
|
||||
const nums = j.current || [];
|
||||
if(nums.length === 0){
|
||||
numList.innerHTML = '-';
|
||||
} else {
|
||||
numList.innerHTML = nums.map(n => '<span class="num-inline">' + String(n) + '</span>').join(' ');
|
||||
}
|
||||
// update waiting count
|
||||
document.getElementById('waiting-count').textContent = (j.waiting != null) ? j.waiting : '0';
|
||||
}catch(e){
|
||||
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}`;
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
fetchCurrent();
|
||||
// poll time
|
||||
setInterval(fetchCurrent, 5000);
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<div class="video-area">
|
||||
<video id="bgvideo" autoplay loop playsinline>
|
||||
<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="info-left" class="info-left">
|
||||
Zapraszamy z numerami: <span id="num-list">-</span>
|
||||
</div>
|
||||
<div class="info-right">
|
||||
Oczekujących: <span id="waiting-count" style="margin-left:1vh;">0</span>
|
||||
</div>
|
||||
<div id="info-bar-text-1" class="info-left">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue