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