init

slug-generator.php

@@ -0,0 +1,68 @@
+<div class="container-dxe">
+    <h1 style="text-align: center; font-size: 25px; padding-bottom: 6px;">Slug Generator</h1>
+    <input class="slug-input" type="text" id="inputText" placeholder="Enter text">
+    <button class="button-style" onclick="generateSlug()">Generate Slug</button>
+    <div id="slugOutput" style="border: 2px solid #ddd; display: none; padding: 6px; border-radius: 6px; margin-top: 10px;"></div>
+    <P style="display: none; text-align: center;" id="copied-notice"></P>
+    <button class="button-style" style="margin-top: 10px; width: 100%; display: none;" id="copyBtn" onclick="copyToClipboard()">Copy Slug</button>
+</div>
+<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, '-');
+        // console.log(slug.length)
+        // Update output
+        if(slug.length > 0){
+            document.getElementById('copyBtn').style.display = 'block';
+            document.getElementById('slugOutput').style.display = 'block';
+        }
+        slugOutput.textContent = slug;
+
+    }
+    function copyToClipboard() {
+        const slugOutput = document.getElementById('slugOutput');
+        const textArea = document.createElement('textarea');
+        textArea.value = slugOutput.textContent;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        document.getElementById('copied-notice').style.display = 'block';
+        document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
+    }
+</script>
+  <style>
+    .container-dxe {
+      max-width: 600px;
+      margin: 50px auto;
+      background-color: #3d3d3d;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+    }
+
+    .slug-input {
+      width: calc(100%);
+      padding: 10px;
+      margin-bottom: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      font-size: 16px;
+    }
+
+    .button-style{
+        padding: 10px 20px;
+        background-color: #7d7d7d;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .button-style:hover {
+        background-color: #9d9d9d;
+    }
+</style>
+