ULTIMATE COLOURFULL TOOLS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ultimate Colorful Text Tool 🌈</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
/* Reset */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background: #0f0f23;
color: #eee;
min-height: 100vh;
padding: 30px 15px;
user-select: none;
}
h1 {
text-align: center;
font-weight: 800;
font-size: 3rem;
background: linear-gradient(45deg, #ff3cac, #784ba0, #2b86c5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 50px;
text-shadow: 0 0 10px #ff3cacaa;
}
.tool-container {
background: #1e1e3f;
border-radius: 20px;
padding: 25px 30px 40px;
margin: 0 auto 40px auto;
max-width: 900px;
box-shadow:
0 0 12px #ff3cac88,
0 0 24px #784ba088,
0 0 40px #2b86c588;
border: 3px solid transparent;
transition: border-color 0.4s ease;
}
.tool-container:hover {
border-color: #ff3cac;
}
.tool-header {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 18px;
background: linear-gradient(90deg, #ff3cac, #784ba0, #2b86c5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 6px #ff3cacbb;
}
textarea, input[type=text] {
width: 100%;
background: #121230;
border: none;
color: #eee;
font-size: 1.15rem;
font-family: 'Poppins', sans-serif;
padding: 15px 20px;
border-radius: 14px;
box-shadow:
inset 0 0 10px #2b86c522,
inset 0 0 20px #784ba044;
resize: vertical;
min-height: 110px;
transition: box-shadow 0.3s ease;
}
textarea:focus, input[type=text]:focus {
outline: none;
box-shadow:
inset 0 0 12px #ff3cacaa,
0 0 10px #ff3caccc;
}
button {
background: linear-gradient(45deg, #ff3cac, #784ba0, #2b86c5);
border: none;
color: white;
font-weight: 700;
font-size: 1.1rem;
padding: 12px 28px;
border-radius: 30px;
cursor: pointer;
margin-right: 14px;
box-shadow:
0 0 12px #ff3cacbb,
0 0 20px #784ba0bb;
transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.2s ease;
background-size: 300% 300%;
background-position: 0% 50%;
user-select: none;
}
button:last-child {
margin-right: 0;
}
button:hover {
background-position: 100% 50%;
box-shadow:
0 0 18px #ff3cacee,
0 0 30px #784ba0ee,
0 0 40px #2b86c5ee;
transform: scale(1.05);
}
button:disabled {
background: #555566cc;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
.result {
background: #121230;
border-radius: 14px;
padding: 20px 24px;
min-height: 90px;
font-size: 1.15rem;
margin-top: 15px;
white-space: pre-wrap;
box-shadow:
inset 0 0 10px #2b86c544;
color: #ddd;
font-weight: 500;
}
label {
font-weight: 600;
margin-bottom: 6px;
display: block;
font-size: 1.1rem;
}
/* Responsive */
@media (max-width: 700px) {
body {
padding: 20px 12px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 35px;
}
.tool-container {
padding: 20px 18px 35px;
margin-bottom: 35px;
}
button {
margin-bottom: 12px;
width: 100%;
margin-right: 0;
}
}
</style>
</head>
<body>
<h1>Ultimate Colorful Text Tool 🌈</h1>
<div class="tool-container" id="plagiarism-tool">
<div class="tool-header">Plagiarism Checker (Duplicate Sentence Detector)</div>
<textarea id="plagiarism-input" placeholder="Paste your text here..."></textarea>
<button onclick="checkPlagiarism()">Check Plagiarism</button>
<div class="result" id="plagiarism-result">Results will appear here.</div>
<button onclick="copyResult('plagiarism-result')">Copy Result</button>
<button onclick="downloadResult('plagiarism-result', 'plagiarism-result.txt')">Download Result</button>
</div>
<div class="tool-container" id="spell-tool">
<div class="tool-header">Spell Checker</div>
<textarea id="spell-input" placeholder="Type or paste text to check spelling..."></textarea>
<button onclick="checkSpelling()">Check Spelling</button>
<div class="result" id="spell-result">Results will appear here.</div>
<button onclick="copyResult('spell-result')">Copy Result</button>
<button onclick="downloadResult('spell-result', 'spell-result.txt')">Download Result</button>
</div>
<div class="tool-container" id="speech-tool">
<div class="tool-header">Speech to Text</div>
<button id="start-speech-btn" onclick="startSpeech()">Start Speaking 🎤</button>
<button id="stop-speech-btn" onclick="stopSpeech()" disabled>Stop</button>
<textarea id="speech-output" placeholder="Your speech will appear here..." rows="5"></textarea>
<button onclick="copyResult('speech-output')">Copy Result</button>
<button onclick="downloadResult('speech-output', 'speech-output.txt')">Download Result</button>
</div>
<div class="tool-container" id="sentence-tool">
<div class="tool-header">Sentence Check (Basic Grammar & Punctuation)</div>
<textarea id="sentence-input" placeholder="Paste text to check sentences..."></textarea>
<button onclick="checkSentence()">Check Sentences</button>
<div class="result" id="sentence-result">Results will appear here.</div>
<button onclick="copyResult('sentence-result')">Copy Result</button>
<button onclick="downloadResult('sentence-result', 'sentence-result.txt')">Download Result</button>
</div>
<div class="tool-container" id="rewrite-tool">
<div class="tool-header">Text Rewriter (Synonym Replacement)</div>
<textarea id="rewrite-input" placeholder="Paste text to rewrite..."></textarea>
<button onclick="rewriteText()">Rewrite Text</button>
<div class="result" id="rewrite-result">Results will appear here.</div>
<button onclick="copyResult('rewrite-result')">Copy Result</button>
<button onclick="downloadResult('rewrite-result', 'rewrite-result.txt')">Download Result</button>
</div>
<div class="tool-container" id="wordcount-tool">
<div class="tool-header">Word & Character Counter</div>
<textarea id="wordcount-input" placeholder="Paste or type text here..."></textarea>
<button onclick="countWords()">Count Words & Characters</button>
<div class="result" id="wordcount-result">Results will appear here.</div>
<button onclick="copyResult('wordcount-result')">Copy Result</button>
<button onclick="downloadResult('wordcount-result', 'wordcount-result.txt')">Download Result</button>
</div>
<div class="tool-container" id="summarize-tool">
<div class="tool-header">Text Summarizer (Basic)</div>
<textarea id="summarize-input" placeholder="Paste text to summarize..."></textarea>
<button onclick="summarizeText()">Summarize</button>
<div class="result" id="summarize-result">Summary will appear here.</div>
<button onclick="copyResult('summarize-result')">Copy Result</button>
<button onclick="downloadResult('summarize-result', 'summary.txt')">Download Result</button>
</div>
<script>
// Plagiarism Checker (duplicate sentence detection)
function checkPlagiarism() {
const text = document.getElementById('plagiarism-input').value.trim();
const resultEl = document.getElementById('plagiarism-result');
if (!text) {
resultEl.textContent = 'Please enter some text.';
return;
}
const sentences = text.match(/[^.!?]+[.!?]*/g) || [];
const seen = new Set();
let duplicates = [];
sentences.forEach(s => {
const trimmed = s.trim().toLowerCase();
if (seen.has(trimmed) && !duplicates.includes(trimmed)) duplicates.push(trimmed);
else seen.add(trimmed);
});
if (duplicates.length) {
resultEl.textContent = `Possible duplicate sentences found:\n- ${duplicates.join('\n- ')}`;
} else {
resultEl.textContent = 'No duplicate sentences found.';
}
}
// Simple Spell Checker (basic dictionary)
const dictionary = new Set([
"the","be","to","of","and","a","in","that","have","i","it","for","not","on","with","he",
"as","you","do","at","this","but","his","by","from","they","we","say","her","she","or",
"an","will","my","one","all","would","there","their","what","so","up","out","if","about",
"who","get","which","go","me"
]);
function checkSpelling() {
const text = document.getElementById('spell-input').value.trim();
const resultEl = document.getElementById('spell-result');
if (!text) {
resultEl.textContent = 'Please enter some text.';
return;
}
const words = text.match(/\b[a-zA-Z']+\b/g) || [];
const errors = [];
words.forEach(w => {
if (!dictionary.has(w.toLowerCase())) {
errors.push(w);
}
});
if (errors.length) {
resultEl.textContent = `Possible misspelled words:\n- ${[...new Set(errors)].join('\n- ')}`;
} else {
resultEl.textContent = 'No spelling errors detected in basic dictionary.';
}
}
// Speech to Text (Web Speech API)
let recognition;
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';
recognition.onresult = function(event) {
let transcript = '';
for(let i=event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
const speechOutput = document.getElementById('speech-output');
speechOutput.value = transcript;
};
recognition.onerror = function(event) {
alert('Speech recognition error: ' + event.error);
};
} else {
document.getElementById('start-speech-btn').disabled = true;
alert('Speech Recognition API not supported in this browser.');
}
function startSpeech() {
if(recognition) {
recognition.start();
document.getElementById('start-speech-btn').disabled = true;
document.getElementById('stop-speech-btn').disabled = false;
}
}
function stopSpeech() {
if(recognition) {
recognition.stop();
document.getElementById('start-speech-btn').disabled = false;
document.getElementById('stop-speech-btn').disabled = true;
}
}
// Sentence Check (basic grammar & punctuation)
function checkSentence() {
const text = document.getElementById('sentence-input').value.trim();
const resultEl = document.getElementById('sentence-result');
if (!text) {
resultEl.textContent = 'Please enter some text.';
return;
}
const sentences = text.match(/[^.!?]+[.!?]*/g) || [];
let issues = [];
sentences.forEach((s, i) => {
const trimmed = s.trim();
if (!/[.!?]$/.test(trimmed)) {
issues.push(`Sentence ${i+1} might be missing ending punctuation.`);
}
if (!/^[A-Z]/.test(trimmed)) {
issues.push(`Sentence ${i+1} does not start with a capital letter.`);
}
if (/\s{2,}/.test(trimmed)) {
issues.push(`Sentence ${i+1} has multiple consecutive spaces.`);
}
});
if (issues.length) {
resultEl.textContent = 'Issues found:\n- ' + issues.join('\n- ');
} else {
resultEl.textContent = 'No obvious sentence issues found.';
}
}
// Text Rewriter (synonym replacement)
const synonyms = {
quick: ['fast', 'speedy', 'swift'],
happy: ['joyful', 'content', 'pleased'],
sad: ['unhappy', 'sorrowful', 'downcast'],
good: ['great', 'positive', 'excellent'],
bad: ['poor', 'negative', 'unfavorable'],
smart: ['intelligent', 'clever', 'bright'],
big: ['large', 'huge', 'vast'],
small: ['tiny', 'little', 'compact'],
important: ['crucial', 'vital', 'significant']
};
function rewriteText() {
const text = document.getElementById('rewrite-input').value.trim();
const resultEl = document.getElementById('rewrite-result');
if (!text) {
resultEl.textContent = 'Please enter some text.';
return;
}
const words = text.split(/\b/);
const rewritten = words.map(w => {
const lw = w.toLowerCase();
if (synonyms[lw]) {
const choices = synonyms[lw];
const replacement = choices[Math.floor(Math.random() * choices.length)];
if (w[0] === w[0].toUpperCase()) {
return replacement.charAt(0).toUpperCase() + replacement.slice(1);
} else {
return replacement;
}
} else {
return w;
}
});
resultEl.textContent = rewritten.join
Comments
Post a Comment