Untitled
unknown
plain_text
a year ago
18 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>সততা বহুভাষী সাঁটলিপি</title> <style> /* Your CSS code here */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #0f1626; color: #fff; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 3px; } header { text-align: center; margin-bottom: 20px; top: 0; /* Position the header at the top */ } h1 { color: #56d6c7; font-size: 36px; margin-bottom: 10px; margin-top: 0; /* Remove top margin to avoid extra space */ } .creator { font-size: 18px; /* Increase font size */ font-family: 'Montserrat', sans-serif; /* Use a different font */ margin-top: 10px; /* Adjust margin */ color: #56d6c7; /* Match color with the header */ animation: glow 2s ease-in-out infinite alternate; /* Add animation */ } @keyframes glow { 0% { text-shadow: 0 0 10px #56d6c7; /* Initial shadow */ } 100% { text-shadow: 0 0 20px #3ea6a0; /* Final shadow */ } } main { background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .text-area { margin-bottom: 20px; } .input-area textarea { width: 100%; padding: 0px; font-size: 16px; border-radius: 5px; border: 1px solid #56d6c7; background-color: rgba(0, 0, 0, 0.8); color: #fff; resize: none; margin-bottom: 10px; pointer-events: auto; /* Enable pointer events initially */ } .input-area textarea:disabled { pointer-events: none; /* Disable pointer events when textarea is disabled */ } .stats span { margin-right: 20px; } .stats { display: flex; justify-content: space-between; margin-top: 10px; } /* Disable text selection */ body { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */ } /* Disable right-click */ body { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */ } /* Optionally style the cursor to indicate that text is not selectable */ body { cursor: default; } .stats span { flex: 1; text-align: center; } .buttons { text-align: center; margin-top: 20px; } .buttons button { padding: 10px 20px; font-size: 16px; background-color: #56d6c7; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .buttons button:hover { background-color: #3ea6a0; } .timer-options { margin-top: 20px; } .timer-options label { display: block; margin-bottom: 5px; color: #56d6c7; } .timer-options select { padding: 8px; font-size: 16px; border-radius: 5px; border: 1px solid #56d6c7; background-color: rgba(0, 0, 0, 0.8); color: #fff; width: 100%; } /* Result pop-up styles */ .result-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; z-index: 1000; /* Ensure the pop-up is above other content */ } .result-close { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; } .result-content { margin-top: 20px; } /* Futuristic popup styles */ .futuristic-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; font-size: 24px; z-index: 1000; /* Ensure the popup is above other content */ } </style> </head> <body> <div class="container"> <header> <h1>সততা বহুভাষী সাঁটলিপি</h1> <p class="creator">Created by "Md. Naimur Rahman"</p> </header> <main> <div class="text-area"> <p id="original-text">Click 'Generate Text' to start typing...</p> </div> <div class="input-area"> <textarea id="user-input" placeholder=" Start typing here..." rows="15" disabled></textarea> <div class="stats"> <span>Timer: <span id="timer">0:00</span></span> <span>Accuracy: <span id="accuracy">0%</span></span> <span>Words: <span id="word-count">0</span></span> <span>Characters: <span id="char-count">0</span></span> </div> </div> <div class="buttons"> <button id="generate-english">Generate English</button> <button id="generate-bangla">Generate Bangla</button> </div> <div class="timer-options"> <label for="timer-duration">Select Timer Duration:</label> <select id="timer-duration"> <option value="600">10 minutes</option> <option value="480">8 minutes</option> <option value="300">5 minutes</option> <option value="180">3 minutes</option> <option value="60">1 minute</option> </select> </div> </main> <!-- Result pop-up --> <div id="result-popup" class="result-popup"> <span id="result-close" class="result-close">×</span> <div id="result-content" class="result-content"></div> </div> </div> <script> // Your JavaScript code here const generateEnglishButton = document.getElementById('generate-english'); const generateBanglaButton = document.getElementById('generate-bangla'); const userInput = document.getElementById('user-input'); const timerDisplay = document.getElementById('timer'); const accuracyDisplay = document.getElementById('accuracy'); const wordCountDisplay = document.getElementById('word-count'); const charCountDisplay = document.getElementById('char-count'); const timerDurationSelect = document.getElementById('timer-duration'); let timerInterval; let startTime; let wordCount = 0; let charCount = 0; let originalText = ''; let language = ''; // Arrays of words to construct the story const englishWords = [ "Once", "upon", "a", "time", "there", "was", "a", "beautiful", "princess", "who", "lived", "in", "a", "castle.", "In", "a", "faraway", "land,", "there", "was", "a", "brave", "knight", "who", "fought", "dragons", "and", "rescued", "the", "villagers.", "Long", "ago,", "there", "was", "a", "magical", "forest", "where", "fairies", "danced", "under", "the", "moonlight.", "In", "the", "city", "of", "London,", "Sherlock", "Holmes", "solved", "mysteries", "with", "his", "brilliant", "mind.", "A", "young", "boy", "named", "Harry", "Potter", "discovered", "he", "was", "a", "wizard", "and", "attended", "Hogwarts", "School", "of", "Witchcraft", "and", "Wizardry." ]; const banglaWords = [ "একবার", "একজন", "রাজকন্যা", "ছিল", "যিনি", "একটি", "রাজপরিবারের", "অংশ।", "দুরন্ত", "দেশে,", "একজন", "সাহসী", "নাইট", "ড্রাগন", "সঙ্গে", "লড়ে", "গ্রামীণদের", "উদ্ধার", "করতে", "যান।", "বিশেষ", "অর্থে,", "একটি", "যেখানে", "স্বর্গীয়", "পক্ষী", "চাঁদের", "আলোয়", "নাচতে।", "লন্ডন", "শহরে,", "শার্লক", "হোমস", "তার", "উজ্জ্বল", "মনের", "সাথে", "মিষ্টিমারু", "সমাধান", "করে।", "একটি", "তরুণ", "ছেলের", "নাম", "হ্যারি", "পটার", "পায়ের", "শিকারী", "এবং", "জাদুকর", "স্কুলে", "যেতে", "পারেন।" ]; // Function to generate a random story in English function generateRandomEnglishStory() { let story = ""; while (story.length < 1300) { const randomIndex = Math.floor(Math.random() * englishWords.length); story += englishWords[randomIndex] + " "; } return story.trim(); } // Function to generate a random story in Bangla function generateRandomBanglaStory() { let story = ""; while (story.length < 1100) { const randomIndex = Math.floor(Math.random() * banglaWords.length); story += banglaWords[randomIndex] + " "; } return story.trim(); } // Update timer every second function updateTimer() { const currentTime = new Date(); const elapsedTime = (currentTime - startTime) / 1000; // in seconds const minutes = Math.floor(elapsedTime / 60); const seconds = Math.floor(elapsedTime % 60); timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; // If timer reaches 0, stop the timer and show result if (elapsedTime >= parseInt(timerDurationSelect.value, 10)) { clearInterval(timerInterval); userInput.disabled = true; // Disable the input field displayResultPopup(`Time's up! Your accuracy: ${calculateAccuracy()}%. Words typed: ${wordCount}. Characters typed: ${charCount}.`); } } // Calculate accuracy function calculateAccuracy() { const typedText = userInput.value.trim(); const originalWords = originalText.split(/\s+/).filter(word => word !== ''); const typedWords = typedText.split(/\s+/).filter(word => word !== ''); let correctWords = 0; let typedWordIndex = 0; // Iterate through each word in the typed text typedWords.forEach(typedWord => { // Check if the typed word matches the corresponding word in the original text if (typedWordIndex < originalWords.length && typedWord === originalWords[typedWordIndex]) { correctWords++; } typedWordIndex++; }); if (language === 'english') { return ((correctWords / 1300) * 100).toFixed(2); } else if (language === 'bangla') { return ((correctWords / 1100) * 100).toFixed(2); } } // Update stats function updateStats() { const typedText = userInput.value.trim(); const typedChars = typedText.replace(/\s/g, '').length; const typedWords = typedText.split(/\s+/).filter(word => word !== '').length; wordCount = typedWords; // Update word count charCount = typedChars; // Update character count accuracyDisplay.textContent = `${calculateAccuracy()}%`; wordCountDisplay.textContent = typedWords; charCountDisplay.textContent = typedChars; } // Reset stats function resetStats() { clearInterval(timerInterval); timerDisplay.textContent = '0:00'; accuracyDisplay.textContent = '0%'; wordCountDisplay.textContent = '0'; charCountDisplay.textContent = '0'; userInput.value = ''; userInput.disabled = true; // Disable the input field closeResultPopup(); // Close the result pop-up if open timerInterval = null; // Reset the timer interval variable } // Start the timer function startTimer() { startTime = new Date(); timerInterval = setInterval(updateTimer, 1000); } // Stop the timer function stopTimer() { clearInterval(timerInterval); } // Function to display result pop-up function displayResultPopup(content) { const resultPopup = document.getElementById('result-popup'); const resultContent = document.getElementById('result-content'); resultContent.textContent = content; resultPopup.style.display = 'block'; // Automatically close the pop-up after 1 minute setTimeout(() => { closeResultPopup(); }, 60000); } // Function to close result pop-up function closeResultPopup() { const resultPopup = document.getElementById('result-popup'); resultPopup.style.display = 'none'; } // Function to display futuristic popup function displayFuturisticPopup() { const futuristicPopup = document.createElement('div'); futuristicPopup.classList.add('futuristic-popup'); futuristicPopup.textContent = "Naimur9800"; document.body.appendChild(futuristicPopup); // Automatically remove the popup after 3 seconds setTimeout(() => { futuristicPopup.remove(); }, 3000); } // Event listener for user input userInput.addEventListener('input', () => { updateStats(); if (!timerInterval && userInput.value.trim() !== '') { // Start the timer only if it's not already running and there is text input startTimer(); } if (userInput.value.trim() === originalText) { stopTimer(); } }); // Event listener for generate English story button generateEnglishButton.addEventListener('click', () => { originalText = generateRandomEnglishStory(); document.getElementById('original-text').textContent = originalText; resetStats(); userInput.disabled = false; // Enable the input field language = 'english'; }); // Event listener for generate Bangla story button generateBanglaButton.addEventListener('click', () => { originalText = generateRandomBanglaStory(); document.getElementById('original-text').textContent = originalText; resetStats(); userInput.disabled = false; // Enable the input field language = 'bangla'; }); // Event listener to prevent copying and pasting in the typing field userInput.addEventListener('copy', (event) => { event.preventDefault(); }); userInput.addEventListener('paste', (event) => { event.preventDefault(); }); // Event listener for changing timer duration timerDurationSelect.addEventListener('change', () => { resetStats(); }); // Event listener for user input to prevent double spaces userInput.addEventListener('keydown', (event) => { // Check if the pressed key is space and the current character is also space if (event.key === ' ' && userInput.value.slice(-1) === ' ') { event.preventDefault(); // Prevent typing the extra space alert('You have clicked "SPACE" more than once.'); // Show alert message } }); // Event listener to handle the Ctrl+0 key combination window.addEventListener('keydown', (event) => { if (event.ctrlKey && event.key === '0') { displayFuturisticPopup(); } }); // Event listener to close result pop-up when close button is clicked document.getElementById('result-close').addEventListener('click', () => { closeResultPopup(); }); </script> </body> </html>
Editor is loading...
Leave a Comment