User:Sudhiksha v/textfrmtog.js

// Create container for toggle button var toggleContainer = document.createElement('div'); toggleContainer.id = 'toggleContainer'; toggleContainer.style.position = 'fixed'; toggleContainer.style.bottom = '55px'; toggleContainer.style.right = '15px'; toggleContainer.style.zIndex = '9999';

// Create toggle button (as an image) var toggleButton = document.createElement('img'); toggleButton.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/800px-Speaker_Icon.svg.png'; toggleButton.alt = 'Toggle Speech'; toggleButton.id = 'toggleSpeech'; toggleButton.style.width = '20px'; // Set width toggleButton.style.height = '20px'; // Set height toggleButton.style.borderRadius = '25%'; // Make it circular toggleButton.style.backgroundColor = 'transparent'; // Transparent initially toggleButton.style.cursor = 'pointer'; toggleButton.style.boxShadow = '0px 4px 8px rgba(0, 0, 0, 0.1)'; // Shadow effect toggleButton.style.transition = 'background-color 0.3s'; // Smooth transition

// Add event listener for button hover toggleButton.addEventListener('mouseenter', function {   toggleButton.style.backgroundColor = '#cfcfcf'; // Change background color on hover });

// Append toggle button to toggle container toggleContainer.appendChild(toggleButton);

// Append toggle container to the document body document.body.appendChild(toggleContainer);

var enterPressed = false; var timer;

// Function to handle key press event function handleKeyPress(event) { if (event.keyCode === 13) { // Check if Enter key is pressed if (!enterPressed) { enterPressed = true; timer = setTimeout(function {               enterPressed = false; // Reset after a delay if no second Enter key press            }, 300); // Adjust the delay as needed } else { clearTimeout(timer); toggleSpeech; // Activate the action when Enter is pressed twice enterPressed = false; // Reset after action is triggered }   } }

// Add event listener for key press document.addEventListener('keypress', handleKeyPress);

// Function to toggle speech synthesis function toggleSpeech { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel; } else { var textToSpeak = document.body.innerText; var utterance = new SpeechSynthesisUtterance(textToSpeak); window.speechSynthesis.speak(utterance); } } // Create controls container var controlsContainer = document.createElement('div'); controlsContainer.id = 'controls'; controlsContainer.style.position = 'fixed'; controlsContainer.style.top = '10px'; controlsContainer.style.right = '10px'; controlsContainer.style.zIndex = '9999'; controlsContainer.style.background = '#fff'; controlsContainer.style.padding = '10px'; controlsContainer.style.border = '1px solid #ccc'; controlsContainer.style.borderRadius = '6px'; controlsContainer.style.display = 'none'; // Hide initially

// Create font size control var fontSizeLabel = document.createElement('label'); fontSizeLabel.textContent = 'Font Size:'; var fontSizeInput = document.createElement('input'); fontSizeInput.type = 'range'; fontSizeInput.id = 'fontSize'; fontSizeInput.min = '10'; fontSizeInput.max = '30'; fontSizeInput.value = '16';

// Create container width control var containerWidthLabel = document.createElement('label'); containerWidthLabel.textContent = 'Container Width:'; var containerWidthInput = document.createElement('input'); containerWidthInput.type = 'range'; containerWidthInput.id = 'containerWidth'; containerWidthInput.min = '50'; containerWidthInput.max = '100'; containerWidthInput.value = '80';

// Append elements to controls container controlsContainer.appendChild(fontSizeLabel); controlsContainer.appendChild(fontSizeInput); controlsContainer.appendChild(document.createElement('br')); controlsContainer.appendChild(containerWidthLabel); controlsContainer.appendChild(containerWidthInput); controlsContainer.appendChild(document.createElement('br')); controlsContainer.appendChild(document.createElement('hr')); // Separation line controlsContainer.appendChild(document.createElement('br'));

// Append controls container to the document body document.body.appendChild(controlsContainer);

// Create container for toggle button/logo var toggleContainer = document.createElement('div'); toggleContainer.id = 'toggleContainer'; toggleContainer.style.position = 'fixed'; toggleContainer.style.top = '15px'; toggleContainer.style.right = '15px'; toggleContainer.style.zIndex = '9999';

// Create toggle button/logo var toggleButton = document.createElement('button'); toggleButton.textContent = '▲'; // Arrow icon toggleButton.style.padding = '4px';

// Append toggle button/logo to toggle container toggleContainer.appendChild(toggleButton);

// Append toggle container to the document body document.body.appendChild(toggleContainer);

// Function to toggle controls visibility function toggleControls { if (controlsContainer.style.display === 'none') { controlsContainer.style.display = 'block'; } else { controlsContainer.style.display = 'none'; } }

// Add event listener for toggle button/logo toggleButton.addEventListener('click', toggleControls);

// Function to update font size fontSizeInput.addEventListener('input', function {   document.body.style.fontSize = fontSizeInput.value + 'px'; });

// Function to update container width containerWidthInput.addEventListener('input', function {   document.body.style.width = containerWidthInput.value + '%'; });