Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Clean Paste - Remove Text Formatting</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> | |
| .text-area-container { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .text-area-container:focus-within { | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); | |
| } | |
| .paste-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .paste-btn:hover { | |
| transform: translateY(-1px); | |
| } | |
| .copy-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .copy-btn:hover { | |
| transform: translateY(-1px); | |
| } | |
| .character-count { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| top: -40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: #333; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| pointer-events: none; | |
| white-space: nowrap; | |
| } | |
| .tooltip:after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: #333 transparent transparent transparent; | |
| } | |
| .show-tooltip { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-3xl bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-blue-600 p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-broom text-white text-2xl"></i> | |
| <h1 class="text-white text-2xl font-bold">Clean Paste</h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-blue-100 text-sm">Paste → Clean → Copy</span> | |
| </div> | |
| </div> | |
| <p class="text-blue-100 mt-1 text-sm">Remove all formatting from your clipboard content</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-area-container bg-gray-50 rounded-lg border border-gray-200 p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label for="clean-text" class="text-gray-600 font-medium">Paste your formatted text here:</label> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-500 character-count">0 characters</span> | |
| <button id="paste-btn" class="paste-btn bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-paste mr-1"></i> Paste | |
| </button> | |
| </div> | |
| </div> | |
| <textarea | |
| id="clean-text" | |
| class="w-full h-64 p-3 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" | |
| placeholder="Paste your formatted text here (or click the Paste button above)..." | |
| spellcheck="false" | |
| ></textarea> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <button id="clear-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-trash-alt mr-2"></i> Clear | |
| </button> | |
| <button id="copy-btn" class="copy-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center relative"> | |
| <i class="fas fa-copy mr-2"></i> Copy Clean Text | |
| <span class="tooltip">Copied to clipboard!</span> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <span id="word-count">0 words</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 border-t border-gray-200"> | |
| <div class="flex flex-wrap items-center justify-center gap-4 text-sm text-gray-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>Formats removed: bold, italic, colors, fonts, etc.</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-keyboard mr-1"></i> | |
| <span>Shortcut: Ctrl+V to paste, Ctrl+C to copy</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-500 text-sm"> | |
| <p>Clean Paste - A simple tool to remove text formatting from your clipboard</p> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cleanTextArea = document.getElementById('clean-text'); | |
| const pasteBtn = document.getElementById('paste-btn'); | |
| const copyBtn = document.getElementById('copy-btn'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const charCount = document.querySelector('.character-count'); | |
| const wordCount = document.getElementById('word-count'); | |
| const tooltip = document.querySelector('.tooltip'); | |
| // Update character and word count | |
| function updateCounts() { | |
| const text = cleanTextArea.value; | |
| charCount.textContent = `${text.length} characters`; | |
| const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; | |
| wordCount.textContent = `${words} words`; | |
| } | |
| // Handle paste from button | |
| pasteBtn.addEventListener('click', async function() { | |
| try { | |
| const text = await navigator.clipboard.readText(); | |
| cleanTextArea.value = text; | |
| updateCounts(); | |
| // Show success feedback | |
| pasteBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Pasted!'; | |
| pasteBtn.classList.remove('bg-blue-100', 'text-blue-700'); | |
| pasteBtn.classList.add('bg-green-100', 'text-green-700'); | |
| setTimeout(() => { | |
| pasteBtn.innerHTML = '<i class="fas fa-paste mr-1"></i> Paste'; | |
| pasteBtn.classList.remove('bg-green-100', 'text-green-700'); | |
| pasteBtn.classList.add('bg-blue-100', 'text-blue-700'); | |
| }, 1500); | |
| } catch (err) { | |
| alert('Failed to read clipboard. Please paste manually into the text area.'); | |
| console.error('Failed to read clipboard contents:', err); | |
| } | |
| }); | |
| // Handle copy button | |
| copyBtn.addEventListener('click', function() { | |
| if (cleanTextArea.value.trim() === '') { | |
| alert('Nothing to copy! Please paste some text first.'); | |
| return; | |
| } | |
| navigator.clipboard.writeText(cleanTextArea.value) | |
| .then(() => { | |
| // Show tooltip | |
| tooltip.classList.add('show-tooltip'); | |
| setTimeout(() => { | |
| tooltip.classList.remove('show-tooltip'); | |
| }, 2000); | |
| }) | |
| .catch(err => { | |
| console.error('Failed to copy text: ', err); | |
| alert('Failed to copy text. Please try again.'); | |
| }); | |
| }); | |
| // Handle clear button | |
| clearBtn.addEventListener('click', function() { | |
| cleanTextArea.value = ''; | |
| updateCounts(); | |
| }); | |
| // Update counts when typing | |
| cleanTextArea.addEventListener('input', updateCounts); | |
| // Handle direct paste into textarea | |
| cleanTextArea.addEventListener('paste', function(e) { | |
| // Let the paste happen first | |
| setTimeout(() => { | |
| updateCounts(); | |
| // Show feedback | |
| const originalPlaceholder = cleanTextArea.placeholder; | |
| cleanTextArea.placeholder = "✓ Text pasted!"; | |
| setTimeout(() => { | |
| cleanTextArea.placeholder = originalPlaceholder; | |
| }, 1500); | |
| }, 10); | |
| }); | |
| // Keyboard shortcuts | |
| document.addEventListener('keydown', function(e) { | |
| if ((e.ctrlKey || e.metaKey) && e.key === 'v' && document.activeElement !== cleanTextArea) { | |
| e.preventDefault(); | |
| pasteBtn.click(); | |
| } | |
| if ((e.ctrlKey || e.metaKey) && e.key === 'c' && document.activeElement === cleanTextArea) { | |
| e.preventDefault(); | |
| copyBtn.click(); | |
| } | |
| }); | |
| // Initialize counts | |
| updateCounts(); | |
| }); | |
| </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=C50BARZ/clean-paste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |