From 1415f2a8f05c24ff26254a30e1a2b0fec92496d3 Mon Sep 17 00:00:00 2001
From: miklo <miklo@hswro.org>
Date: Thu, 4 Dec 2025 13:24:52 +0100
Subject: [PATCH] add scroll

---
 src/app.py                   |   1 -
 src/templates/infokiosk.html | 152 ++++++++++++++++-------------------
 2 files changed, 69 insertions(+), 84 deletions(-)

diff --git a/src/app.py b/src/app.py
index df870a5..75d8453 100644
--- a/src/app.py
+++ b/src/app.py
@@ -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()
 
diff --git a/src/templates/infokiosk.html b/src/templates/infokiosk.html
index dfad5d2..b2e63ea 100644
--- a/src/templates/infokiosk.html
+++ b/src/templates/infokiosk.html
@@ -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;
-	}
- 
-    .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;
-	}
+    :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; }
 
+     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>
-