Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Specializer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; | |
| } | |
| .vintage-text { | |
| font-family: 'Times New Roman', serif; | |
| color: #5c4d3c; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); | |
| letter-spacing: 0.05em; | |
| } | |
| .glitch-effect { | |
| position: relative; | |
| } | |
| .glitch-effect::before, .glitch-effect::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch-effect::before { | |
| color: #0ff; | |
| z-index: -1; | |
| animation: glitch 3s infinite; | |
| } | |
| .glitch-effect::after { | |
| color: #f0f; | |
| z-index: -2; | |
| animation: glitch 2s infinite reverse; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #333; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #333; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold gradient-text mb-2">Text Specializer</h1> | |
| <p class="text-gray-600">Transform your text into something extraordinary!</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label for="inputText" class="block text-gray-700 font-medium mb-2">Enter your text:</label> | |
| <textarea id="inputText" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" placeholder="Type something amazing..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Choose a style:</label> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3"> | |
| <button onclick="transformText('gradient')" class="style-btn bg-gradient-to-r from-blue-500 to-purple-500 text-white"> | |
| <i class="fas fa-paint-brush mr-2"></i> Gradient | |
| </button> | |
| <button onclick="transformText('neon')" class="style-btn bg-gray-800 text-white"> | |
| <i class="fas fa-lightbulb mr-2"></i> Neon | |
| </button> | |
| <button onclick="transformText('vintage')" class="style-btn bg-amber-700 text-white"> | |
| <i class="fas fa-scroll mr-2"></i> Vintage | |
| </button> | |
| <button onclick="transformText('glitch')" class="style-btn bg-purple-900 text-white"> | |
| <i class="fas fa-bug mr-2"></i> Glitch | |
| </button> | |
| <button onclick="transformText('typewriter')" class="style-btn bg-gray-700 text-white"> | |
| <i class="fas fa-keyboard mr-2"></i> Typewriter | |
| </button> | |
| <button onclick="transformText('bold')" class="style-btn bg-gray-200 text-gray-800"> | |
| <i class="fas fa-bold mr-2"></i> Bold | |
| </button> | |
| <button onclick="transformText('italic')" class="style-btn bg-gray-200 text-gray-800"> | |
| <i class="fas fa-italic mr-2"></i> Italic | |
| </button> | |
| <button onclick="transformText('uppercase')" class="style-btn bg-gray-200 text-gray-800"> | |
| <i class="fas fa-text-height mr-2"></i> Uppercase | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">Special characters:</label> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button onclick="addSymbol('★')" class="symbol-btn">★</button> | |
| <button onclick="addSymbol('☆')" class="symbol-btn">☆</button> | |
| <button onclick="addSymbol('✿')" class="symbol-btn">✿</button> | |
| <button onclick="addSymbol('♥')" class="symbol-btn">♥</button> | |
| <button onclick="addSymbol('☀')" class="symbol-btn">☀</button> | |
| <button onclick="addSymbol('☁')" class="symbol-btn">☁</button> | |
| <button onclick="addSymbol('⚡')" class="symbol-btn">⚡</button> | |
| <button onclick="addSymbol('❄')" class="symbol-btn">❄</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <button onclick="copyToClipboard()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200"> | |
| <i class="fas fa-copy mr-2"></i> Copy | |
| </button> | |
| <button onclick="clearText()" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200"> | |
| <i class="fas fa-trash-alt mr-2"></i> Clear | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-500" id="charCount">0 characters</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Specialized Text:</h2> | |
| <div id="outputText" class="min-h-32 p-4 border border-gray-200 rounded-lg bg-gray-50"> | |
| <p class="text-gray-400 italic">Your transformed text will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center py-6 text-gray-500 text-sm"> | |
| <p>Made with <i class="fas fa-heart text-red-500"></i> using HTML, CSS & JavaScript</p> | |
| </footer> | |
| <script> | |
| const inputText = document.getElementById('inputText'); | |
| const outputText = document.getElementById('outputText'); | |
| const charCount = document.getElementById('charCount'); | |
| // Update character count | |
| inputText.addEventListener('input', function() { | |
| const count = this.value.length; | |
| charCount.textContent = `${count} character${count !== 1 ? 's' : ''}`; | |
| }); | |
| // Text transformation functions | |
| function transformText(style) { | |
| const text = inputText.value.trim(); | |
| if (!text) { | |
| alert('Please enter some text first!'); | |
| return; | |
| } | |
| let transformedText = text; | |
| let className = ''; | |
| switch(style) { | |
| case 'gradient': | |
| className = 'gradient-text text-2xl font-bold'; | |
| break; | |
| case 'neon': | |
| className = 'neon-text text-2xl font-bold text-blue-400'; | |
| break; | |
| case 'vintage': | |
| className = 'vintage-text text-xl italic'; | |
| break; | |
| case 'glitch': | |
| className = 'glitch-effect text-2xl font-bold relative'; | |
| transformedText = `<span data-text="${text}">${text}</span>`; | |
| break; | |
| case 'typewriter': | |
| className = 'typewriter text-xl font-mono'; | |
| break; | |
| case 'bold': | |
| className = 'font-bold'; | |
| break; | |
| case 'italic': | |
| className = 'italic'; | |
| break; | |
| case 'uppercase': | |
| className = 'uppercase'; | |
| break; | |
| } | |
| outputText.innerHTML = `<p class="${className}">${transformedText}</p>`; | |
| } | |
| // Add special symbol | |
| function addSymbol(symbol) { | |
| const currentText = inputText.value; | |
| const cursorPos = inputText.selectionStart; | |
| const newText = currentText.substring(0, cursorPos) + symbol + currentText.substring(cursorPos); | |
| inputText.value = newText; | |
| inputText.focus(); | |
| inputText.setSelectionRange(cursorPos + symbol.length, cursorPos + symbol.length); | |
| } | |
| // Copy to clipboard | |
| function copyToClipboard() { | |
| if (!outputText.textContent.trim() || outputText.textContent.includes('Your transformed text')) { | |
| alert('Nothing to copy! Transform some text first.'); | |
| return; | |
| } | |
| const range = document.createRange(); | |
| range.selectNode(outputText); | |
| window.getSelection().removeAllRanges(); | |
| window.getSelection().addRange(range); | |
| document.execCommand('copy'); | |
| window.getSelection().removeAllRanges(); | |
| // Show feedback | |
| const originalText = outputText.innerHTML; | |
| outputText.innerHTML = '<p class="text-green-500 font-medium">Copied to clipboard!</p>'; | |
| setTimeout(() => { | |
| outputText.innerHTML = originalText; | |
| }, 1500); | |
| } | |
| // Clear all text | |
| function clearText() { | |
| inputText.value = ''; | |
| outputText.innerHTML = '<p class="text-gray-400 italic">Your transformed text will appear here...</p>'; | |
| charCount.textContent = '0 characters'; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/text-visualiser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |