Ole-Morten Duesund
44a2ac4cbd
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>
66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="Transform your text into corrupted zalgo text with one click. Perfect for creating glitchy, distorted text effects."
|
|
/>
|
|
<meta name="theme-color" content="#1a1a2e" />
|
|
<title>Text Corruptor - Zalgo Text Generator</title>
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png" />
|
|
<link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png" />
|
|
<link rel="apple-touch-icon" href="icons/icon-192.png" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Text Corruptor</h1>
|
|
<p class="subtitle">Transform your text into corrupted chaos</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="controls">
|
|
<label for="intensity">Corruption Intensity:</label>
|
|
<input type="range" id="intensity" min="1" max="10" value="5" />
|
|
<span id="intensityValue">5</span>
|
|
</div>
|
|
|
|
<div class="text-area-container">
|
|
<label for="inputText">Original Text</label>
|
|
<textarea
|
|
id="inputText"
|
|
placeholder="Enter your text here..."
|
|
rows="6"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="text-area-container">
|
|
<label for="outputText">Corrupted Text</label>
|
|
<textarea
|
|
id="outputText"
|
|
placeholder="Your corrupted text will appear here..."
|
|
rows="6"
|
|
readonly
|
|
title="Click to copy"
|
|
></textarea>
|
|
<div id="copyNotification" class="copy-notification">Copied!</div>
|
|
</div>
|
|
|
|
<button id="clearBtn" class="clear-btn">Clear All</button>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Click the corrupted text to copy it to your clipboard</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="zalgo.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|