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

mv

Browse Source
This commit is contained in:
Matej Novotný 2024-11-19 18:35:48 +01:00
commit cc992add60
2 changed files with 179 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Script_Speech_recognition/stranka.html
View File

@ -48,7 +48,6 @@
<script type="module" src="videoplayer.js"></script> <script type="module" src="videoplayer.js"></script>
<script src="kontrola_api.js"></script> <script src="kontrola_api.js"></script>
<script src="speech_recognition.js"></script> <script src="speech_recognition.js"></script>
<script src="videoplayer.js"></script>

312
Script_Speech_recognition/style.css
View File

@ -1,45 +1,56 @@
/* Default Light Theme */ /* Default Light Theme */
body { html, body {
height: 100%; /* Ensure that the HTML and body elements span the full height of the viewport */
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling but allow vertical scrolling */
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
margin: 0; }
padding: 0;
body {
width: 100%;
height: 100%;
box-sizing: border-box; /* Make sure padding and borders are included in width/height */
} }
h1 { h1 {
text-align: center; text-align: center;
color: #4285f4; color: #4285f4;
font-size: 28px; font-size: 28px;
margin-top: 20px; margin: 20px 0;
} }
/* Full-width container taking half the height of the page */
.container { .container {
display: flex; display: flex;
justify-content: center; /* Center the elements horizontally */ justify-content: center; /* Center the elements horizontally */
align-items: flex-start; /* Align items to the top */ align-items: center; /* Center items vertically */
padding: 20px; width: 100%; /* Full width of the page */
padding: 20px; /* Add some padding for spacing */
gap: 20px; /* Maintain a comfortable space between elements */ gap: 20px; /* Maintain a comfortable space between elements */
flex-wrap: wrap; /* Allow wrapping for responsive layouts */ flex-wrap: wrap; /* Allow wrapping for responsive layouts */
max-width: 1200px; /* Set max-width to keep layout centered and compact */ box-sizing: border-box; /* Include padding in width calculation */
margin: 0 auto; /* Center the container itself */
} }
.textarea-container, .textarea-container {
.video { position: relative; /* Needed for absolute positioning of child elements */
width: 45%; width: 45%;
max-width: 500px; max-width: 600px;
min-width: 300px; /* Minimum width for smaller screens */ min-width: 350px;
box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
} }
/* Styling for the buttons above the textarea */
.translation-buttons { .translation-buttons {
display: flex; display: flex;
justify-content: center; /* Center buttons */ justify-content: center; /* Center the buttons horizontally */
gap: 10px; gap: 10px; /* Space between the buttons */
margin-bottom: 20px; margin-bottom: 15px; /* Space between buttons and textarea */
} }
.translation-buttons button { #translateWordsBtn, #translateLettersBtn {
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
background-color: #4285f4; background-color: #4285f4;
@ -48,6 +59,49 @@ h1 {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Added shadow for consistency */
}
#translateWordsBtn:hover, #translateLettersBtn:hover {
background-color: #357ae8;
}
/* Active button style */
.translation-buttons .active {
background-color: #357ae8;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#inputText {
width: 100%;
height: 200px;
padding: 15px;
font-size: 16px;
background-color: #f9f9f9;
border: 2px solid #e0e0e0;
border-radius: 8px;
color: #333;
resize: none; /* Disable resizing */
box-sizing: border-box; /* Ensure padding doesn't affect the width */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative; /* Needed for buttons inside the textarea container */
}
/* Microphone button inside textarea, positioned bottom-left */
#startBtn {
position: absolute;
left: 10px;
bottom: 10px;
padding: 8px;
font-size: 20px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 5;
} }
.translation-buttons button:hover { .translation-buttons button:hover {
@ -79,89 +133,34 @@ h1 {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
#timerDisplay, #statusText { /* Translate button inside textarea, positioned bottom-right, increased size by half */
text-align: center; #translateBtn {
font-size: 18px; position: absolute;
color: #555; right: 10px;
} bottom: 10px;
padding: 12px 25px; /* Increased padding to make button larger */
#statusText { font-size: 18px; /* Increased font size */
color: #f44336;
}
/* Style for buttons */
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4285f4; background-color: #4285f4;
color: white; color: white;
border: none; border: none;
border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
border-radius: 5px; z-index: 5;
} }
button:hover { #translateBtn:hover {
background-color: #357ae8; background-color: #357ae8;
} }
button.dark-mode {
background-color: #333;
color: #fff;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
h1.dark-mode {
color: #8ab4f8;
}
textarea.dark-mode {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
textarea.dark-mode:focus {
border-color: #8ab4f8;
}
#startBtn.dark-mode {
background-color: #8ab4f8;
color: #121212;
}
#startBtn.dark-mode:hover {
background-color: #76a7f3;
}
#timerDisplay.dark-mode, #statusText.dark-mode {
color: #b0b0b0;
}
#statusText.dark-mode {
color: #cf6679;
}
.video.dark-mode {
background-color: #1e1e1e; /* Dark background for video container */
border: 2px solid #333; /* Dark border */
}
.video.dark-mode video {
background-color: #1e1e1e; /* Dark background for video */
}
.video { .video {
position: relative; position: relative;
max-height: 400px; /* Set a reasonable maximum height */ width: 45%;
max-width: 600px;
min-width: 350px;
aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */ aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
background-color: #ffffff; background-color: #ffffff;
border: 14px solid #d4d4d4; border: 12px solid #d4d4d4;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
@ -169,12 +168,13 @@ textarea.dark-mode:focus {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
transition: transform 0.3s ease; transition: transform 0.3s ease;
box-sizing: border-box;
} }
/* Styling for video element inside .video */ /* Styling for video element inside .video */
.video video { .video video {
width: 100%; width: 100%;
max-height: 100%; /* Ensure the video fits within the container */ max-height: 150%; /* Ensure the video fits within the container */
border-radius: 4px; border-radius: 4px;
object-fit: cover; /* Ensure the video fits its container */ object-fit: cover; /* Ensure the video fits its container */
} }
@ -189,68 +189,27 @@ textarea.dark-mode:focus {
color: white; color: white;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 50px; /* Increase button size */
height: 40px; height: 50px; /* Increase button size */
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.2s; transition: background-color 0.3s ease;
z-index: 10; /* Ensure buttons are above other elements */ z-index: 10; /* Ensure buttons are above other elements */
} }
#prevBtn:hover, #nextBtn:hover { #prevBtn:hover, #nextBtn:hover {
background-color: #357ae8; background-color: #357ae8;
transform: scale(1.1);
} }
#prevBtn { #prevBtn {
left: -20px; left: -30px; /* Adjust button position for better appearance */
} }
#nextBtn { #nextBtn {
right: -20px; right: -30px; /* Adjust button position for better appearance */
}
/* Style for the start button */
#startBtn {
position: absolute;
left: 10px; /* Position it to the left inside the container */
bottom: 10px; /* Place it at the bottom */
padding: 10px;
font-size: 24px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Hover effect for start button */
#startBtn:hover {
background-color: #357ae8;
}
/* Style for the translate button */
#translateBtn {
position: absolute;
right: 10px; /* Position it to the right inside the container */
bottom: 10px; /* Place it at the bottom */
padding: 10px 20px;
font-size: 16px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Hover effect for translate button */
#translateBtn:hover {
background-color: #357ae8;
} }
/* Style for the theme toggle button (icon) */ /* Style for the theme toggle button (icon) */
@ -274,6 +233,55 @@ textarea.dark-mode:focus {
color: #4285f4; /* Heading color */ color: #4285f4; /* Heading color */
font-size: 24px; /* Font size for the heading */ font-size: 24px; /* Font size for the heading */
text-align: center; /* Center align the text */ text-align: center; /* Center align the text */
margin: 0;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
h1.dark-mode {
color: #8ab4f8;
}
textarea.dark-mode {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
textarea.dark-mode:focus {
border-color: #8ab4f8;
}
#startBtn.dark-mode,
#translateBtn.dark-mode,
#translateWordsBtn.dark-mode,
#translateLettersBtn.dark-mode,
#prevBtn.dark-mode,
#nextBtn.dark-mode {
background-color: #333;
color: #fff;
}
#startBtn.dark-mode:hover,
#translateBtn.dark-mode:hover,
#translateWordsBtn.dark-mode:hover,
#translateLettersBtn.dark-mode:hover,
#prevBtn.dark-mode:hover,
#nextBtn.dark-mode:hover {
background-color: #555;
}
.video.dark-mode {
background-color: #1e1e1e;
border-color: #333;
}
#themeToggleBtn.dark-mode {
color: #e0e0e0;
} }
/* Responsive layout adjustments */ /* Responsive layout adjustments */
@ -281,11 +289,49 @@ textarea.dark-mode:focus {
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px; /* Add padding for spacing on smaller screens */
gap: 15px; /* Reduce gap for smaller screens */
height: auto; /* Allow the height to adjust for mobile screens */
} }
.textarea-container, .textarea-container,
.video { .video {
width: 90%; /* Expand to take more space on smaller screens */ width: 100%; /* Full width for smaller screens */
max-width: none; max-width: none;
} }
#translateWordsBtn, #translateLettersBtn {
font-size: 14px; /* Reduce button font size for smaller screens */
padding: 8px 15px; /* Reduce button padding for smaller screens */
}
#inputText {
height: 150px; /* Reduce height for the text area */
}
#startBtn, #translateBtn {
font-size: 16px; /* Reduce button font size for smaller screens */
padding: 10px; /* Reduce button padding */
}
#prevBtn, #nextBtn {
width: 40px; /* Reduce button size for smaller screens */
height: 40px; /* Reduce button size for smaller screens */
}
#prevBtn {
left: -20px; /* Adjust button position for smaller screens */
}
#nextBtn {
right: -20px; /* Adjust button position for smaller screens */
}
h1 {
font-size: 24px; /* Decrease heading font size for mobile devices */
}
#themeToggleBtn {
font-size: 20px; /* Decrease theme toggle button size for mobile */
}
} }