|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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'); |
|
|
|
|
|
|
|
|
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.'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
textInput.addEventListener('input', function() { |
|
|
charCount.textContent = textInput.value.length; |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
