Untitled

 avatar
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">&times;</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