diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css new file mode 100644 index 0000000..4053323 --- /dev/null +++ b/Script_Speech_recognition/style.css @@ -0,0 +1,120 @@ +/* Default Light Theme */ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + color: #333; + margin: 0; + padding: 0; +} + +h1 { + text-align: center; + color: #4285f4; + font-size: 36px; + margin-top: 20px; +} + +.container { + display: flex; + justify-content: center; + margin: 20px; +} + +textarea { + width: 45%; + height: 200px; + margin: 0 10px; + padding: 10px; + background-color: #fff; + border: 2px solid #ccc; + border-radius: 4px; + color: #333; + font-size: 16px; + resize: none; +} + +textarea:focus { + border-color: #4285f4; + outline: none; +} + +#startBtn { + display: block; + margin: 20px auto; + padding: 10px 20px; + font-size: 24px; + background-color: #4285f4; + color: white; + border: none; + border-radius: 50px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#startBtn:hover { + background-color: #357ae8; +} + +#timerDisplay, #statusText { + text-align: center; + font-size: 18px; + color: #555; +} + +#statusText { + color: #f44336; +} + +/* Dark Theme (this will be applied dynamically) */ +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; +} + +/* 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 */ +} \ No newline at end of file