From daf6f0da657ceecad0b244c5d547b650d0cdddb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Panenko?= Date: Thu, 14 Nov 2024 16:06:19 +0000 Subject: [PATCH] Update Script_Speech_recognition/style.css --- Script_Speech_recognition/style.css | 201 ++++++++++++++++++++++++---- 1 file changed, 172 insertions(+), 29 deletions(-) diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css index ab52454..c62e17a 100644 --- a/Script_Speech_recognition/style.css +++ b/Script_Speech_recognition/style.css @@ -10,20 +10,64 @@ body { h1 { text-align: center; color: #4285f4; - font-size: 36px; + font-size: 28px; margin-top: 20px; } .container { display: flex; - flex-wrap: wrap; - gap: 5%; justify-content: center; + align-items: center; + gap: 5%; padding: 20px; + flex-wrap: wrap; /* Allow wrapping for responsive layouts */ } +.translation-buttons { + display: flex; + gap: 10px; + margin-bottom: 20px; +} -#startBtn, #translateLettersBtn, #translateWordsBtn { +.translation-buttons button { + padding: 10px 20px; + font-size: 16px; + background-color: #4285f4; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.translation-buttons button: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); +} + +.textarea-container, +.video { + width: 45%; + max-width: 500px; +} + +.textarea-container { + position: relative; + display: inline-block; +} + +.video { + display: inline-block; + vertical-align: top; +} + +#translateLettersBtn, #translateWordsBtn { display: block; margin: 20px auto; padding: 10px 20px; @@ -36,10 +80,6 @@ h1 { transition: background-color 0.3s ease; } -#startBtn:hover { - background-color: #357ae8; -} - #timerDisplay, #statusText { text-align: center; font-size: 18px; @@ -49,6 +89,116 @@ h1 { #statusText { color: #f44336; } +/* Style for buttons */ +button { + padding: 10px 20px; + font-size: 16px; + background-color: #4285f4; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #357ae8; +} + +button.dark-mode { + background-color: #333; + 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 */ +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 { @@ -117,15 +267,20 @@ textarea.dark-mode:focus { 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 { position: relative; width: 45%; /* Default width */ max-width: 500px; - aspect-ratio: 16/9; /* Keep a responsive aspect ratio */ - padding: 10px; + /*aspect-ratio: 16/9; /* Keep a responsive aspect ratio */ background-color: #ffffff; - border: 2px solid #e0e0e0; - border-radius: 8px; + border: 14px solid #d4d4d4; + border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; /* Stack items vertically */ @@ -134,22 +289,12 @@ textarea.dark-mode:focus { transition: transform 0.3s ease; } -.video h2 { - color: #4285f4; /* Optional: change heading color */ - font-size: 24px; /* Optional: adjust font size */ - text-align: center; /* Center align the text */ -} - -.video:hover { - transform: scale(1.02); /* Slight zoom on hover */ -} /* Styling for video element inside .video */ .video video { width: 100%; height: 100%; border-radius: 4px; - border: none; } /* Styling for navigation buttons */ @@ -207,15 +352,13 @@ textarea:focus { outline: none; } -/* Responsive layout */ @media (max-width: 768px) { .container { - align-items: center; - gap: 5%; + flex-direction: column; } - .video, textarea { - width: 90%; - max-width: 90%; - margin-bottom: 10px; + + .textarea-container, + .video { + width: 90%; /* Wider for smaller screens */ } } \ No newline at end of file