From ef16b32e6275109cba30f89a7d1f1f57c8ca43b0 Mon Sep 17 00:00:00 2001
From: Valentin Korenjak <valentin@korenjak.si>
Date: Thu, 19 Mar 2026 22:16:30 +0100
Subject: [PATCH] =?UTF-8?q?Vizualni=20feedback=20ob=20vnosu=20=C5=A1tevilk?=
 =?UTF-8?q?e=20(preko=20ekrana=20ali=20preko=20tipkovnice).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/static/script.js  | 20 +++++++++++++++++++-
 web/static/styles.css |  6 ++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/web/static/script.js b/web/static/script.js
index 662a2d7..90778a2 100644
--- a/web/static/script.js
+++ b/web/static/script.js
@@ -20,6 +20,7 @@ const searchResults = document.getElementById('search-results');
 let capsMode = false;
 let wakeLock = null;
 let lastStateSignature = "";
+let lastPageInfo = "";
 
 // vibracija telefona
 function vibrate() {
@@ -71,7 +72,8 @@ async function updateState(force = false) {
         lastStateSignature = signature;
 
         displayArea.textContent = data.current_text || 'Pripravljeno. Vpiši številko pesmi.';
-        pageInfo.textContent = data.page_info || '';
+        lastPageInfo = data.page_info || '';
+        updatePageInfoDisplay();
 
         capsMode = data.caps_mode || false;
 
@@ -88,14 +90,28 @@ async function updateState(force = false) {
     }
 }
 
+// Posodobi prikaz v page-info (vključno z vnosom številke)
+function updatePageInfoDisplay() {
+    const songNumber = songNumberInput.value;
+    if (songNumber) {
+        pageInfo.textContent = 'Vnos: ' + songNumber;
+        pageInfo.classList.add('input-active');
+    } else {
+        pageInfo.textContent = lastPageInfo;
+        pageInfo.classList.remove('input-active');
+    }
+}
+
 // dodaj številko
 function addDigit(digit) {
     songNumberInput.value += digit;
+    updatePageInfoDisplay();
 }
 
 // počisti vnos
 function clearInput() {
     songNumberInput.value = '';
+    updatePageInfoDisplay();
 }
 
 // Enter:
@@ -113,6 +129,7 @@ async function loadSong() {
             });
 
             songNumberInput.value = '';
+            updatePageInfoDisplay();
         } else {
             await fetch('/api/next_page', { method: 'POST' });
         }
@@ -152,6 +169,7 @@ async function searchSongs() {
                 `;
                 item.addEventListener('click', () => {
                     songNumberInput.value = song[0];
+                    updatePageInfoDisplay();
                     loadSong();
                     searchInput.value = '';
                     searchResults.innerHTML = '';
diff --git a/web/static/styles.css b/web/static/styles.css
index a796427..b6b89e1 100644
--- a/web/static/styles.css
+++ b/web/static/styles.css
@@ -68,6 +68,12 @@ body {
     font-size: 20px;
     line-height: 1.2;
     white-space: nowrap;
+    transition: color 0.2s ease, font-weight 0.2s ease;
+}
+
+.page-info.input-active {
+    color: #1f8a46;
+    font-weight: bold;
 }
 
 .menu-container {