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>
2025-08-18 20:00:58 +02:00 · 2025-08-18 20:00:58 +02:00 · 44a2ac4cbd
commit 44a2ac4cbd
23 changed files with 1672 additions and 0 deletions
--- a/app/generate-icons.html
+++ b/app/generate-icons.html
@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Generate PWA Icons</title>
+    </head>
+    <body>
+        <h1>Icon Generator for Text Corruptor</h1>
+        <p>Right-click each canvas and save as PNG to the icons folder</p>
+
+        <div id="canvases"></div>
+
+        <script>
+            // Icon sizes needed for PWA
+            const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+
+            function createIcon(size) {
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+
+                const ctx = canvas.getContext('2d');
+
+                // Background gradient
+                const gradient = ctx.createLinearGradient(0, 0, size, size);
+                gradient.addColorStop(0, '#1a1a2e');
+                gradient.addColorStop(1, '#0f0f14');
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, size, size);
+
+                // Add glitch lines effect
+                ctx.strokeStyle = 'rgba(0, 255, 136, 0.1)';
+                ctx.lineWidth = 1;
+                for (let i = 0; i < size; i += 4) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, i);
+                    ctx.lineTo(size, i);
+                    ctx.stroke();
+                }
+
+                // Center circle background
+                const centerX = size / 2;
+                const centerY = size / 2;
+                const radius = size * 0.35;
+
+                ctx.beginPath();
+                ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+                const circleGradient = ctx.createRadialGradient(
+                    centerX,
+                    centerY,
+                    0,
+                    centerX,
+                    centerY,
+                    radius
+                );
+                circleGradient.addColorStop(0, '#00ff88');
+                circleGradient.addColorStop(1, '#00cc6a');
+                ctx.fillStyle = circleGradient;
+                ctx.fill();
+
+                // Add corrupted "T" letter with zalgo effect simulation
+                ctx.font = `bold ${size * 0.4}px Arial`;
+                ctx.fillStyle = '#0f0f14';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+
+                // Main letter
+                ctx.fillText('T', centerX, centerY);
+
+                // Simulated zalgo corruption marks
+                ctx.fillStyle = 'rgba(15, 15, 20, 0.5)';
+                const corruption = ['̴', '̸', '̶', '̷', '̵'];
+                const offsetX = size * 0.02;
+                const offsetY = size * 0.02;
+
+                // Add small corruption marks around the letter
+                for (let i = 0; i < 3; i++) {
+                    const x = centerX + (Math.random() - 0.5) * offsetX * 2;
+                    const y = centerY + (Math.random() - 0.5) * offsetY * 2;
+                    ctx.font = `${size * 0.1}px Arial`;
+                    ctx.fillText('░', x, y - size * 0.15);
+                    ctx.fillText('▒', x + offsetX, y + size * 0.15);
+                }
+
+                // Add glitch effect
+                ctx.strokeStyle = '#ff3366';
+                ctx.lineWidth = 1;
+                ctx.globalAlpha = 0.3;
+                ctx.strokeText('T', centerX - 2, centerY);
+                ctx.strokeStyle = '#00ffff';
+                ctx.strokeText('T', centerX + 2, centerY);
+                ctx.globalAlpha = 1;
+
+                // Add label
+                const label = document.createElement('div');
+                label.textContent = `icon-${size}.png`;
+                label.style.marginTop = '10px';
+                label.style.marginBottom = '20px';
+
+                const container = document.createElement('div');
+                container.appendChild(canvas);
+                container.appendChild(label);
+
+                return container;
+            }
+
+            // Generate all icons
+            const container = document.getElementById('canvases');
+            sizes.forEach(size => {
+                container.appendChild(createIcon(size));
+            });
+
+            // Auto-download function (optional - uncomment to use)
+            /*
+        function downloadCanvas(canvas, filename) {
+            canvas.toBlob(blob => {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+            });
+        }
+        
+        // Auto-download all icons
+        setTimeout(() => {
+            const canvases = document.querySelectorAll('canvas');
+            canvases.forEach((canvas, index) => {
+                setTimeout(() => {
+                    downloadCanvas(canvas, `icon-${sizes[index]}.png`);
+                }, index * 500);
+            });
+        }, 1000);
+        */
+        </script>
+
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                padding: 20px;
+                background: #f0f0f0;
+            }
+            canvas {
+                border: 1px solid #ccc;
+                display: block;
+                background: white;
+            }
+            #canvases > div {
+                display: inline-block;
+                margin: 10px;
+                text-align: center;
+            }
+        </style>
+    </body>
+</html>