Initial commit: Text Corruptor PWA
Features: - Zalgo text generator with adjustable intensity (1-10) - Real-time text corruption as you type - Click-to-copy functionality with visual feedback - Progressive Web App with offline support - Responsive design for mobile and desktop - Dark theme with glitch-inspired aesthetics Technical implementation: - Pure JavaScript implementation (no frameworks) - Service Worker for offline functionality - PWA manifest for installability - Python development server - Comprehensive linting setup (ESLint, Prettier, Black, Pylint) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
commit
44a2ac4cbd
23 changed files with 1672 additions and 0 deletions
122
app/app.js
Normal file
122
app/app.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* Main application logic for Text Corruptor
|
||||
* Handles UI interactions and PWA registration
|
||||
*/
|
||||
|
||||
/* global ZalgoGenerator */
|
||||
|
||||
// Initialize zalgo generator
|
||||
const zalgo = new ZalgoGenerator();
|
||||
|
||||
// DOM elements
|
||||
const inputText = document.getElementById('inputText');
|
||||
const outputText = document.getElementById('outputText');
|
||||
const intensitySlider = document.getElementById('intensity');
|
||||
const intensityValue = document.getElementById('intensityValue');
|
||||
const clearBtn = document.getElementById('clearBtn');
|
||||
const copyNotification = document.getElementById('copyNotification');
|
||||
|
||||
/**
|
||||
* Update the corrupted text output
|
||||
*/
|
||||
function updateOutput() {
|
||||
const text = inputText.value;
|
||||
const intensity = parseInt(intensitySlider.value);
|
||||
|
||||
if (text) {
|
||||
outputText.value = zalgo.generate(text, intensity);
|
||||
} else {
|
||||
outputText.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy text to clipboard and show notification
|
||||
*/
|
||||
async function copyToClipboard() {
|
||||
if (!outputText.value) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(outputText.value);
|
||||
|
||||
// Show copy notification
|
||||
copyNotification.classList.add('show');
|
||||
setTimeout(() => {
|
||||
copyNotification.classList.remove('show');
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
outputText.select();
|
||||
document.execCommand('copy');
|
||||
|
||||
// Show copy notification
|
||||
copyNotification.classList.add('show');
|
||||
setTimeout(() => {
|
||||
copyNotification.classList.remove('show');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all text fields
|
||||
*/
|
||||
function clearAll() {
|
||||
inputText.value = '';
|
||||
outputText.value = '';
|
||||
inputText.focus();
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
inputText.addEventListener('input', updateOutput);
|
||||
|
||||
intensitySlider.addEventListener('input', () => {
|
||||
intensityValue.textContent = intensitySlider.value;
|
||||
updateOutput();
|
||||
});
|
||||
|
||||
outputText.addEventListener('click', copyToClipboard);
|
||||
|
||||
clearBtn.addEventListener('click', clearAll);
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
document.addEventListener('keydown', e => {
|
||||
// Ctrl/Cmd + K to clear
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
clearAll();
|
||||
}
|
||||
|
||||
// Ctrl/Cmd + C when output is focused to copy
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'c' && document.activeElement === outputText) {
|
||||
copyToClipboard();
|
||||
}
|
||||
});
|
||||
|
||||
// Register service worker for PWA functionality
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker
|
||||
.register('sw.js')
|
||||
.then(registration => {
|
||||
console.log('Service Worker registered successfully:', registration.scope);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Service Worker registration failed:', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Handle install prompt for PWA
|
||||
window.addEventListener('beforeinstallprompt', e => {
|
||||
// Prevent the mini-infobar from appearing on mobile
|
||||
e.preventDefault();
|
||||
// Store the event so it can be triggered later if needed
|
||||
// Currently not used but kept for potential future install button
|
||||
window.deferredPrompt = e;
|
||||
console.log('Install prompt ready');
|
||||
});
|
||||
|
||||
// Focus input on load
|
||||
window.addEventListener('load', () => {
|
||||
inputText.focus();
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue