File size: 8,706 Bytes
cfb4511 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to TXT Downloader</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 {
min-height: 300px;
transition: all 0.3s ease;
}
.text-area:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.download-btn {
transition: all 0.2s ease;
}
.download-btn:hover {
transform: translateY(-2px);
}
.download-btn:active {
transform: translateY(0);
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-12">
<div class="max-w-3xl mx-auto">
<!-- Header -->
<div class="text-center mb-10">
<h1 class="text-4xl font-bold text-gray-800 mb-2">TEXT to TXT</h1>
<p class="text-gray-600 text-lg">Paste your text below and download it as a .txt file</p>
</div>
<!-- Main Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Text area -->
<div class="p-6">
<div class="mb-4">
<label for="textInput" class="block text-gray-700 text-sm font-medium mb-2">
Your Text (Character count: <span id="charCount">0</span>)
</label>
<textarea
id="textInput"
class="text-area w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
placeholder="Start typing or paste your text here..."
></textarea>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<button id="pasteBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors">
<i class="fas fa-paste mr-2"></i> Paste
</button>
<button id="clearBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors">
<i class="fas fa-trash mr-2"></i> Clear Text
</button>
</div>
<button id="downloadBtn" class="download-btn px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-md flex items-center gap-2">
<i class="fas fa-download"></i>
Download as TXT
</button>
</div>
</div>
<!-- Features Section -->
<div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
<h3 class="font-medium text-gray-700 mb-2">Features:</h3>
<ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 text-sm text-gray-600">
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> Unlimited text length
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> Simple interface
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> Fast downloading
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> Cross-platform
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> No data collection
</li>
<li class="flex items-center gap-2">
<i class="fas fa-check text-green-500"></i> Works offline
</li>
</ul>
</div>
</div>
<!-- Footer -->
<div class="text-center mt-8 text-gray-500 text-sm">
<p>Created with <i class="fas fa-heart text-red-500"></i> - All data stays on your device</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const textInput = document.getElementById('textInput');
const downloadBtn = document.getElementById('downloadBtn');
const clearBtn = document.getElementById('clearBtn');
const pasteBtn = document.getElementById('pasteBtn');
const charCount = document.getElementById('charCount');
// Handle paste from clipboard
pasteBtn.addEventListener('click', async function() {
try {
const text = await navigator.clipboard.readText();
textInput.value = text;
charCount.textContent = text.length;
} catch (err) {
alert('Failed to read clipboard. Make sure you have granted clipboard permissions.');
}
});
// Update character count
textInput.addEventListener('input', function() {
charCount.textContent = textInput.value.length;
});
// Download as TXT file
downloadBtn.addEventListener('click', function() {
const text = textInput.value.trim();
if (!text) {
alert('Please enter some text to download.');
return;
}
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
// Generate filename with current date and time
const now = new Date();
const formattedDate = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}-${now.getMinutes().toString().padStart(2, '0')}`;
a.download = `text_file_${formattedDate}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// Animation feedback
downloadBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Downloaded!';
downloadBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
downloadBtn.classList.add('bg-green-600', 'hover:bg-green-700');
setTimeout(() => {
downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download as TXT';
downloadBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
downloadBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
}, 2000);
});
// Clear text
clearBtn.addEventListener('click', function() {
textInput.value = '';
charCount.textContent = '0';
textInput.focus();
});
});
</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=AmitJ82/simple-text-notes-downloader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |