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 {