mk875sd/projekt-7
4
1
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fixed stranku podla taskov, koniec 3 sprintu

Browse Source
This commit is contained in:
Matej Novotný 2024-11-22 19:15:38 +01:00
parent cc992add60
commit fccaed6e39
4 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Script_Speech_recognition/stranka.html
View File

@ -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;">

33
Script_Speech_recognition/style.css
View File

@ -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 */
@ -335,3 +335,34 @@ textarea.dark-mode:focus {
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 */
}

22
Script_Speech_recognition/videoplayer.js
View File

@ -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
}
});