clean

.hta_slug/slug-generator.php

@@ -0,0 +1,71 @@
+<section class="diZContainer diZmxAuto diZmy8">
+    <h1 class="diZBorderBottom">Slug Generator</h1>
+    <p class="diZTextJustify">The Slug Generator tool allows you to easily create SEO-friendly slugs from your input text. A slug is a URL-friendly version of a string, typically used in web addresses to identify a specific page or resource. This tool converts any text you input into a lowercase string, removes special characters, and replaces spaces with hyphens to generate a clean and readable URL slug.</p>
+    <div class="diZMaxW600 diZmxAuto diZmy20 diZFlexColumn toolsSection">
+        <textarea class="diZTextAreaResizeNone" placeholder="Enter text" id="inputText" rows="6"></textarea> <br>
+        <button class="diZmxAuto" onclick="generateSlug()"><span>Generate Slug</span></button>
+        <p id="copied-notice" class="diZDisplayNone"></p>
+        <textarea id="slugOutput" class="diZTextAreaResizeNone diZDisplayNone diZmy4" rows="6"></textarea>
+        <button id="copyBtn" class="diZDisplayNone diZmxAuto" onclick="copyToClipboard()"><span>Copy Slug</span></button>
+    </div>
+    <div>
+        <h3>Usage:</h3>
+        <ul>
+            <li><strong>Enter Text:</strong> Input your desired text into the text area provided.</li>
+            <li><strong>Generate Slug:</strong> Click the "Generate Slug" button to convert the text into a URL-friendly slug.</li>
+            <li><strong>Copy Slug:</strong> Once generated, the slug will appear in the output text area. Click the "Copy Slug" button to copy it to your clipboard.</li>
+            <li><strong>Paste and Use:</strong> Paste the copied slug directly into your web application, blog post, or any other content management system (CMS) where you need a URL slug.</li>
+        </ul>
+        
+        <h3>Features:</h3>
+        <ul>
+            <li>Converts text to lowercase.</li>
+            <li>Removes special characters and replaces spaces with hyphens.</li>
+            <li>Provides instant feedback with a "Slug copied to clipboard!" notification upon copying.</li>
+        </ul>
+        
+        <h3>Example Use Cases:</h3>
+        <ul>
+            <li>Bloggers creating SEO-friendly URLs for their articles.</li>
+            <li>Developers generating slugs for dynamic content pages.</li>
+            <li>Content managers ensuring consistency and readability in URL structures.</li>
+        </ul>
+    </div>
+</section>
+<script>
+    function generateSlug() {
+        const inputText = document.getElementById('inputText').value;
+        const slugOutput = document.getElementById('slugOutput');
+        // Generate slug
+        const slug = inputText.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
+
+        // Update output textarea and display copy button
+        if (slug.length > 0) {
+            document.getElementById('copyBtn').style.display = 'block';
+            slugOutput.style.display = 'block';
+            slugOutput.value = slug;
+        } else {
+            document.getElementById('copyBtn').style.display = 'none';
+            slugOutput.style.display = 'none';
+        }
+    }
+
+    function copyToClipboard() {
+        const slugOutput = document.getElementById('slugOutput');
+        const textArea = document.createElement('textarea');
+        textArea.value = slugOutput.value;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        // Show copied notice
+        document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
+        document.getElementById('copied-notice').style.display = 'block';
+
+        // Hide notice after 1 second
+        setTimeout(() => {
+            document.getElementById('copied-notice').style.display = 'none';
+        }, 1000);
+    }
+</script>