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

fixed video height

Browse Source
This commit is contained in:
Mário Panenko 2024-11-18 12:40:06 +00:00
parent 7d9b575cd9
commit 4aa5daaf77
1 changed files with 100 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
Script_Speech_recognition/style.css
View File

@ -16,15 +16,25 @@ h1 {
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center; /* Center the elements horizontally */
align-items: center; align-items: flex-start; /* Align items to the top */
gap: 5%;
padding: 20px; padding: 20px;
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 */
margin: 0 auto; /* Center the container itself */
}
.textarea-container,
.video {
width: 45%;
max-width: 500px;
min-width: 300px; /* Minimum width for smaller screens */
} }
.translation-buttons { .translation-buttons {
display: flex; display: flex;
justify-content: center; /* Center buttons */
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -51,33 +61,22 @@ h1 {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.textarea-container,
.video {
width: 45%;
max-width: 500px;
}
.textarea-container { .textarea-container {
position: relative; position: relative;
display: inline-block;
} }
.video { #inputText {
display: inline-block; width: 100%;
vertical-align: top; height: 200px;
} padding: 15px;
font-size: 16px;
#translateLettersBtn, #translateWordsBtn { background-color: #f9f9f9;
display: block; border: 2px solid #e0e0e0;
margin: 20px auto; border-radius: 8px;
padding: 10px 20px; color: #333;
font-size: 24px; resize: none; /* Disable resizing */
background-color: #4285f4; box-sizing: border-box; /* Ensure padding doesn't affect the width */
color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
} }
#timerDisplay, #statusText { #timerDisplay, #statusText {
@ -89,6 +88,7 @@ h1 {
#statusText { #statusText {
color: #f44336; color: #f44336;
} }
/* Style for buttons */ /* Style for buttons */
button { button {
padding: 10px 20px; padding: 10px 20px;
@ -97,6 +97,8 @@ button {
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 5px;
} }
button:hover { button:hover {
@ -108,99 +110,7 @@ button.dark-mode {
color: #fff; color: #fff;
} }
/* Wrapper for textarea and buttons */
.textarea-container {
position: relative; /* Allows positioning of elements inside it */
width: 45%; /* Set width for the container */
max-width: 500px; /* Optional: max width */
}
/* Textarea Style */
#inputText {
width: 100%; /* Take up full width */
height: 200px; /* Set a fixed height */
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 */
}
/* 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;
}
/* Styling for the timer and status text */
#timerDisplay, #statusText {
text-align: center;
font-size: 18px;
color: #555;
}
#statusText {
color: #f44336;
}
/* Dark Mode */ /* Dark Mode */
body.dark-mode {
background-color: #121212;
color: white;
}
h1.dark-mode {
color: white;
}
textarea.dark-mode {
background-color: #333;
color: white;
border: 1px solid #444;
}
.video.dark-mode {
background-color: #333;
}
/* Dark Theme (this will be applied dynamically) */
body.dark-mode { body.dark-mode {
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
@ -246,58 +156,30 @@ textarea.dark-mode:focus {
background-color: #1e1e1e; /* Dark background for video */ background-color: #1e1e1e; /* Dark background for video */
} }
.video.dark-mode #translationVideo{
border: 0px solid #333;
}
/* Style for the theme toggle button (icon) */
#themeToggleBtn {
position: fixed;
top: 20px;
right: 20px; /* Changed from left to right */
background-color: transparent;
border: none;
font-size: 24px;
cursor: pointer;
z-index: 1000; /* Ensure it stays on top */
transition: color 0.3s ease;
}
#themeToggleBtn:hover {
color: #f4b400; /* Add a hover color effect */
}
.video h2 {
color: #4285f4; /* Optional: change heading color */
font-size: 24px; /* Optional: adjust font size */
text-align: center; /* Center align the text */
}
.video { .video {
position: relative; position: relative;
width: 45%; /* Default width */ max-height: 400px; /* Set a reasonable maximum height */
max-width: 500px; aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
/*aspect-ratio: 16/9; /* Keep a responsive aspect ratio */
background-color: #ffffff; background-color: #ffffff;
border: 14px solid #d4d4d4; border: 14px 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;
flex-direction: column; /* Stack items vertically */ flex-direction: column;
align-items: center; /* Center content */ align-items: center;
justify-content: flex-start; /* Align items to the start */ justify-content: flex-start;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
/* Styling for video element inside .video */ /* Styling for video element inside .video */
.video video { .video video {
width: 100%; width: 100%;
height: 100%; max-height: 100%; /* Ensure the video fits within the container */
border-radius: 4px; border-radius: 4px;
object-fit: cover; /* Ensure the video fits its container */
} }
/* Styling for navigation buttons */ /* Navigation button styles */
#prevBtn, #nextBtn { #prevBtn, #nextBtn {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -315,11 +197,12 @@ textarea.dark-mode:focus {
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, transform 0.2s;
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); /* Small zoom on hover */ transform: scale(1.1);
} }
#prevBtn { #prevBtn {
@ -330,35 +213,79 @@ textarea.dark-mode:focus {
right: -20px; right: -20px;
} }
/* Styling for textarea */ /* Style for the start button */
textarea { #startBtn {
width: 45%; /* Match video width */ position: absolute;
max-width: 500px; left: 10px; /* Position it to the left inside the container */
min-height: 200px; bottom: 10px; /* Place it at the bottom */
padding: 15px; padding: 10px;
background-color: #f9f9f9; font-size: 24px;
border: 2px solid #e0e0e0; background-color: #4285f4;
border-radius: 8px; color: white;
color: #333; 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; font-size: 16px;
resize: none; background-color: #4285f4;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); color: white;
transition: border-color 0.3s ease, box-shadow 0.3s ease; border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
} }
textarea:focus { /* Hover effect for translate button */
border-color: #4285f4; #translateBtn:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); background-color: #357ae8;
outline: none;
} }
/* Style for the theme toggle button (icon) */
#themeToggleBtn {
position: fixed;
top: 20px;
right: 20px;
background-color: transparent;
border: none;
font-size: 24px;
cursor: pointer;
z-index: 1000; /* Ensure it stays on top */
transition: color 0.3s ease;
}
#themeToggleBtn:hover {
color: #f4b400; /* Add a hover color effect */
}
.video h2 {
color: #4285f4; /* Heading color */
font-size: 24px; /* Font size for the heading */
text-align: center; /* Center align the text */
}
/* Responsive layout adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.textarea-container, .textarea-container,
.video { .video {
width: 90%; /* Wider for smaller screens */ width: 90%; /* Expand to take more space on smaller screens */
max-width: none;
} }
} }