glitchcraft/app/index.html

66 lines
2.5 KiB
HTML
Raw Normal View History

<!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">
<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>