add scroll

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()
 

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%;}
+    :root { height: 100%; }
-    html,body{height:100%;margin:0;font-family:Helvetica,Arial;color:#000;}
+    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{
+    .video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }
-		flex:0 0 85%; 
+
-		position:relative; 
+     body { background: #fdb515; }
-		overflow:hidden; 
+
-		background:#000;
+    .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{
+    @keyframes scroll-left {
-		flex:0 0 15%; 
+        from { transform: translateX(100%); }
-		background:#fdb515; 
+        to { transform: translateX(-100%); }
-		color:#000; 
-		display:flex; 
-		align-items:center; 
-		box-sizing:border-box; 
-		height:15vh; 
-		min-height:50px;
-		padding-left:4vh;
-		padding-right:4vh;
     }
 
-
+    .video-area video {
-    .video-area video{
+        position: absolute; 
-      position:absolute;
+        top: 50%; 
-      top:50%;
+        left: 50%; 
-      left:50%;
+        transform: translate(-50%, -50%); 
-      transform:translate(-50%,-50%);
+        height: 100%; 
-      height:100%;
+        width: auto; 
-      width:auto;
+        object-fit: cover; 
-      object-fit:cover;
     }
 
-
     .info-bar, .info-bar .info-left, .info-bar .info-right {
-		font-size:5vh;
+        font-size: 5vh; 
-		line-height:1;
-	}
-
-    .info-left, .info-right{
-      display:flex;
-      align-items:center;
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
-    }
-
-    .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;
+        line-height: 1; 
-      vertical-align:middle;
     }
 
-    @media (max-width:700px){
+    .num-inline {            
-      .video-area{flex-basis:70%}
+        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() {
-    async function fetchCurrent(){
+      try {
-      try{
+        const r = await fetch('/current', { cache: 'no-store' });
-        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){
+        const waitingCount = j.waiting != null ? j.waiting : '0';
-			numList.innerHTML = '-';
+        
-		} else {
+        const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę na queue.hswro.org';
-			numList.innerHTML = nums.map(n => '<span class="num-inline">' + String(n) + '</span>').join(' ');
+        const numsFormatted = nums.map(n => `<span class="num-inline">${n}</span>`).join(' ');
-		}
+        const numList = nums.length > 0 ? `| Zapraszamy z numerami: ${numsFormatted}` : '';
-    // update waiting count
+        const combinedText = `${infoText} | Oczekujących: ${waitingCount} ${numList}`;
-        document.getElementById('waiting-count').textContent = (j.waiting != null) ? j.waiting : '0';
+        
-      }catch(e){
+        // 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">
+      <div id="info-bar-text-1" class="info-left">-</div>   
-        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>
   </div>
 </body>
 </html>
-