Ole-Morten Duesund
7b0a3746d5
Mobile improvements: - Comprehensive responsive design for 320px-4K screens - Touch-optimized controls with larger touch targets - iOS zoom prevention with 16px font sizes on inputs - Swipe-friendly interface with better spacing - Portrait and landscape orientation support - Enhanced accessibility with better contrast and sizes Zalgo variants implemented: - Full Chaos: Balanced corruption (default) - Above Only: Marks above characters only - Below Only: Marks below characters only - Middle Only: Overlaying marks - Mini Glitch: Subtle corruption - Heavy Corruption: Maximum chaos overload UI enhancements: - Added corruption mode selector dropdown - Reorganized controls into responsive groups - Improved mobile control layouts - Better visual hierarchy and spacing Code quality: - Fixed ESLint/Prettier indentation conflict - Enhanced ZalgoGenerator with mode parameter - Added event handlers for mode selection - Comprehensive mobile CSS with multiple breakpoints Documentation: - Created comprehensive README with zalgo examples - Documented all corruption modes with examples - Added development and deployment instructions The app now provides a perfect mobile experience with diverse zalgo corruption options for creative text effects. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
3.3 KiB
HTML
80 lines
3.3 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>GlitchCraft - Artisanal Text Corruption</title>
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="icon" type="image/svg+xml" sizes="192x192" href="icons/icon-192.svg" />
|
|
<link rel="icon" type="image/svg+xml" sizes="512x512" href="icons/icon-512.svg" />
|
|
<link rel="apple-touch-icon" href="icons/icon-192.svg" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>GlitchCraft</h1>
|
|
<p class="subtitle">Artisanal text corruption, served fresh!</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label for="zalgoMode">Corruption Mode:</label>
|
|
<select id="zalgoMode">
|
|
<option value="full">Full Chaos</option>
|
|
<option value="above">Above Only</option>
|
|
<option value="below">Below Only</option>
|
|
<option value="middle">Middle Only</option>
|
|
<option value="mini">Mini Glitch</option>
|
|
<option value="heavy">Heavy Corruption</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="intensity">Intensity:</label>
|
|
<input type="range" id="intensity" min="1" max="10" value="5" />
|
|
<span id="intensityValue">5</span>
|
|
</div>
|
|
</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>
|