From fccaed6e39ce0ed936668976bb84e3ecd1d69234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Novotn=C3=BD?= <matej.novotny@student.tuke.sk>
Date: Fri, 22 Nov 2024 19:15:38 +0100
Subject: [PATCH] fixed stranku podla taskov, koniec 3 sprintu

---
 .../speech_recognition.js                     |  2 +-
 Script_Speech_recognition/stranka.html        |  6 +---
 Script_Speech_recognition/style.css           | 33 ++++++++++++++++++-
 Script_Speech_recognition/videoplayer.js      | 22 +++++++++++--
 4 files changed, 54 insertions(+), 9 deletions(-)
diff --git a/Script_Speech_recognition/speech_recognition.js b/Script_Speech_recognition/speech_recognition.js
index 49ed2b0..e96638d 100644
--- a/Script_Speech_recognition/speech_recognition.js
+++ b/Script_Speech_recognition/speech_recognition.js
@@ -119,4 +119,4 @@ document.addEventListener('DOMContentLoaded', function() {
     } else {
         alert('Tento prehliadač nepodporuje rozpoznávanie reči.');
     }
-});
+});
\ No newline at end of file
diff --git a/Script_Speech_recognition/stranka.html b/Script_Speech_recognition/stranka.html
index fc3354e..851304d 100644
--- a/Script_Speech_recognition/stranka.html
+++ b/Script_Speech_recognition/stranka.html
@@ -6,7 +6,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Jednoduchý Prekladač</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="progress_bar.css">
 </head>
 <body>
 
@@ -16,9 +15,7 @@
 <h1>Prekladač slovenčiny do slovenského posunkového jazyka</h1>
 
 <div class="container">
-    <!-- Textové pole na zadanie textu -->
     <div class="textarea-container">
-        <!-- Tlačidlá pre preklad -->
         <div class="translation-buttons">
             <button id="translateWordsBtn" class="active">Preložiť po slovách</button>
             <button id="translateLettersBtn">Preložiť po písmenách</button>
@@ -30,7 +27,6 @@
         <div id="timerDisplay"></div>
     </div>
 
-    <!-- Video na preklad -->
     <div class="video">
         <h2 id="currentLetter" style="text-align: center;"></h2>
         <video id="translationVideo" controls style="border-radius: 4px;">
@@ -52,4 +48,4 @@
 
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css
index 88607f8..4f91ad2 100644
--- a/Script_Speech_recognition/style.css
+++ b/Script_Speech_recognition/style.css
@@ -39,7 +39,7 @@ h1 {
     width: 45%;
     max-width: 600px;
     min-width: 350px;
-	    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
+		    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
 }
 
 /* Styling for the buttons above the textarea */
@@ -334,4 +334,35 @@ textarea.dark-mode:focus {
     #themeToggleBtn {
         font-size: 20px; /* Decrease theme toggle button size for mobile */
     }
+}
+#translateBtn {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    padding: 12px 25px; /* Increased padding to make button larger */
+    font-size: 18px; /* Increased font size */
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 5;
+}
+
+/* Hover state when button is enabled */
+#translateBtn:hover {
+    background-color: #357ae8;
+}
+
+/* Disabled button styling */
+#translateBtn:disabled {
+    background-color: #d4d4d4; /* Lighter background color when disabled */
+    color: #a0a0a0; /* Lighter text color */
+    box-shadow: none; /* Remove shadow when disabled */
+}
+
+/* Add custom styles to show the disabled state better */
+#translateBtn:disabled:hover {
+    background-color: #d4d4d4; /* Keep the same color on hover for disabled state */
 }
\ No newline at end of file
diff --git a/Script_Speech_recognition/videoplayer.js b/Script_Speech_recognition/videoplayer.js
index addddba..1903868 100644
--- a/Script_Speech_recognition/videoplayer.js
+++ b/Script_Speech_recognition/videoplayer.js
@@ -10,14 +10,15 @@ const translateWordsBtn = document.getElementById('translateWordsBtn');
 const translateLettersBtn = document.getElementById('translateLettersBtn');
 const prevBtn = document.getElementById('prevBtn');
 const nextBtn = document.getElementById('nextBtn');
-const translateBtn = document.getElementById('translateBtn'); // Prelož button
+const translateBtn = document.getElementById('translateBtn');
 const statusText = document.getElementById('statusText');
 
 // Translation state variables
 let videoSequence = [];
 let currentIndex = 0;
 let autoPlayEnabled = true;
-let currentTranslationMode = 'words'; // Default mode
+let currentTranslationMode = 'letters'; // Default mode
+translateBtn.disabled = true;
 
 // Function to check if video exists (for local testing)
 async function videoExists(src) {
@@ -127,6 +128,15 @@ function playVideoAtIndex(index) {
     }
 }
 
+// Initially set the active button based on the default translation mode
+if (currentTranslationMode === 'letters') {
+    translateLettersBtn.classList.add('active');
+    translateWordsBtn.classList.remove('active');
+} else {
+    translateWordsBtn.classList.add('active');
+    translateLettersBtn.classList.remove('active');
+}
+
 // Event listener for "Prelož" button (Translate button)
 translateBtn.addEventListener('click', async () => {
     autoPlayEnabled = true;
@@ -175,3 +185,11 @@ nextBtn.addEventListener('click', () => {
         playVideoAtIndex(currentIndex);
     }
 });
+
+inputText.addEventListener('input', () => {
+    if (inputText.value.trim().length > 0) {
+        translateBtn.disabled = false; // Enable the translate button if there's text
+    } else {
+        translateBtn.disabled = true; // Disable the translate button if the text is empty
+    }
+});
\ No newline at end of file
