Script Search and Share<\/title>\n <style>\n\n .custom-search-button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 85px;\n background-color:#9333ea;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 1097px;\nmargin-top: -80px; \/* Reset top margin *\/\n padding-top: -40px; \/* Add spacing at the top *\/\n \n margin: -70px auto; \/* Removes default margin *\/\n position: relative; \/* Ensures position adjustments work *\/\n \n \n }\n .search-form {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n align-items: center;\n width: 100%;\n\n }\n .search-form label {\n font-size: 24px;\n font-weight: bold;\n max-width: 300px;\n margin-right: 40px;\n color: #FFFFFF;\n font-family: 'Arial', sans-serif; \/* Specifies the font family *\/\n\n\n }\n\n\/* Active States *\/\n.button:active {\n transform: translateY(0); \/* Reset lift on click *\/\n}\n\n \n #script-type {\n width: 200px;\n padding: 12px 20px;\n font-size: 16px;\n border: 2px solid #6c6f74;\n border-radius: 10px;\n background-color: #ffffff;\n cursor: pointer;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n appearance: none;\n }\n .search-field {\n padding: 12px 30px;\n font-size: 16px;\n border: 2px solid #6c6f74;\n border-radius: 25px;\n flex-grow: 1;\n transition: border-color 0.3s ease;\n max-width: 500px;\n }\n .search-submit {\n padding: 12px 35px;\n font-weight: bold;\n border: none;\n border-radius: 25px;\n background-color: #050505;\n color: white;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .scriptOutput {\n margin-top: 20px;\n border: 1px solid #ccc;\n padding: 10px;\n min-height: 100px;\n \n \n }\n #shareBtn, #shareLink {\n margin-top: 10px;\n }\n <\/style>\n <\/head>\n <body>\n <div class=\"wp-block-search custom-search-button\">\n <form role=\"search\" method=\"get\" class=\"search-form\" id=\"searchForm\">\n \n <label for=\"script-type\">Script Type:<\/label>\n <select id=\"script-type\" style=\"padding: 10px; font-weight: bold; border-radius: 5px; border: 2px solid #2e1294;\">\n <option value=\"bash\" selected=\"selected\">Bash<\/option>\n <option value=\"python\">Python<\/option>\n <option value=\"ruby\">Ruby<\/option>\n <option value=\"perl\">Perl<\/option>\n <option value=\"powershell\">PowerShell<\/option>\n\n <\/select>\n \n \n <input type=\"search\" id=\"search-form-1\" class=\"search-field\" placeholder=\"\ud83d\udd0d Search\u2026\" name=\"s\" title=\"Search for:\" style=\"padding: 10px; font-weight: bold; border: 2px solid #2e1294; border-radius: 5px;\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n\n \n<button id=\"searchButton\" type=\"submit\" class=\"search-submit\" title=\"Search\" style=\"padding: 8px 15px; background-color: #000000; color: white; border: none; border-radius: 25px; font-size: 1em; cursor: pointer; transition: background-color 0.3s;\">\n <i class=\"fas fa-search\"><\/i> \n<\/button>\n\n\n<a id=\"shareLink\" href=\"\" target=\"_blank\" rel=\"noopener\" title=\"Share Script Link\" style=\"display: inline-block; margin-top: 15px; margin-bottom: 15px; padding: 5px 15px; font-weight: bold; border-radius: 25px; background-color: #000000; color: white; text-decoration: none; font-size: 1em; text-align: center; transition: background-color 0.3s;\">\n <i class=\"fas fa-share-alt\"><\/i> \n<\/a>\n<\/button>\n\n \n <\/form>\n <\/div>\n \n \n \n \n <script>\n\t\t\tfunction postScriptData() {\n\t\t\t const codeEditor = document.getElementById('code-editor');\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n\t\t\t\tconst currentScriptId = document.getElementById('hidden-scriptId')\n\t\t\t\tconst payload = {\n\t\t\t\t\tid: \"\",\n\t\t\t\t\tscriptType: scriptTypeSelect.value,\n\t\t\t\t\tscriptText: codeEditor.value,\n\t\t\t\t\tkeyword: searchInput.value\n\t\t\t\t};\n\n\t\t\t\treturn fetch(\"https:\/\/devopsify.org:8443\/item\", {\n\t\t\t\t\tmethod: \"POST\",\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t\"Content-Type\": \"application\/json\"\n\t\t\t\t\t},\n\t\t\t\t\tbody: JSON.stringify(payload)\n\t\t\t\t})\n\t\t\t\t.then(response => {\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\tthrow new Error(\"Failed to post script\");\n\t\t\t\t\t}\n\t\t\t\t\treturn response.json(); \/\/ Ensure it returns the JSON response\n\t\t\t\t})\n\t\t\t\t.then(data => {\n\t\t\t\t\tconsole.log(\"POST Response:\", data);\n\t\t\t\t\treturn data; \/\/ Return the actual data\n\t\t\t\t})\n\t\t\t\t.catch(error => {\n\t\t\t\t\tconsole.error(\"Error posting script:\", error);\n\t\t\t\t\treturn { error: \"Error posting script.\" }; \/\/ Return an error object instead of failing silently\n\t\t\t\t});\n\t\t\t}\n\n function fetchScriptOutput(scriptId) {\n return fetch(`https:\/\/devopsify.org:8443\/item\/${encodeURIComponent(scriptId)}`)\n .then(response => response.json())\n .then(data => {\n if (data && data.script) {\n\t\t\t\t\t\t\tconsole.log(\"found1:{}\",scriptId);\n return data.script;\n } else {\n\t\t\t\t\t\t\tconsole.log(\"notfound1:{}\",scriptId);\n throw new Error('Script not found');\n }\n })\n .catch(error => {\n console.error('Error fetching script:', error);\n return 'Error fetching script.';\n });\n }\n \n function handleSearch(event) {\n event.preventDefault();\n \t\t\tconst baseUrl = `https:\/\/devopsify.org\/?page_id=290`;\n\t\t\t\twindow.history.pushState({}, '', baseUrl);\n const urlParams = new URLSearchParams(window.location.search);\n\n\t\t\t\tpostScriptData().then(output => {\n\t\t\t\t\t\tconsole.log(\"added:\",output.scriptText);\n\t\t\t\t\t\tconst newUrl = `https:\/\/devopsify.org\/?page_id=290&scriptId=${encodeURIComponent(output.id)}`;\n\t\t\t\t\t\twindow.history.pushState({}, '', newUrl);\n document.getElementById('code-editor').value = output.scriptText;\n\n\t\t\t\t\t\t\/\/const newUrl = `https:\/\/devopsify.org\/?scriptId=${encodeURIComponent(output.id)}`;\n const shareBtn = document.getElementById('shareBtn');\n shareBtn.style.display = \"inline-block\";\n });\n\t\t\t\t\tconsole.log(\"notfound2:{}\",scriptId);\n }\n \n\n document.getElementById('searchForm').addEventListener('submit', handleSearch);\n\t\t\tdocument.getElementById('shareBtn').addEventListener('click', function() {\n\t\t\t\tconst pageUrl = window.location.href; \/\/ Get the current page URL\n\n\t\t\t\tnavigator.clipboard.writeText(pageUrl).then(() => {\n\t\t\t\t\talert('Link copied: ' + pageUrl);\n\t\t\t\t}).catch(err => {\n\t\t\t\t\tconsole.error('Failed to copy:', err);\n\t\t\t\t});\n\t\t\t});\n\n <\/script>\n <\/body>\n \n \n \n \n <\/form>\n <div id=\"loadingIndicator\" style=\"display: none; text-align: center; margin-top: 100px;\">\n <p>\n <span class=\"spinner\"><\/span> \n Loading script, please wait…\n <\/p>\n <\/div>\n \n \n \n <style>\n #loadingIndicator {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80px; \/* Adjust based on your layout *\/\n text-align: center;\n margin-top: 10px;\n }\n \n .spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 4px solid #000000;\n width: 20px; \/* Size of the spinner *\/\n height: 20px; \/* Size of the spinner *\/\n animation: spin 1s linear infinite;\n display: inline-block; \/* Keeps the spinner inline with the text *\/\n margin-right: 10px; \/* Space between spinner and text *\/\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n #loadingIndicator p {\n margin: 0;\n font-size: 16px; \/* Font size for the loading text *\/\n color: #333; \/* Color of the loading text *\/\n display: flex; \/* Flex container for better alignment *\/\n align-items: center; \/* Aligns spinner and text vertically *\/\n justify-content: center; \/* Center the text horizontally *\/\n gap: 10px; \/* Space between spinner and text *\/\n }\n \n \n \n <\/style>\n \n <style>\n \/* Add responsive styles *\/\n @media (max-width: 600px) {\n .search-form {\n flex-direction: column !important;\n gap: 15px !important;\n }\n \n .search-field, .search-submit, #script-type {\n width: 100% !important;\n }\n }\n \n \/* Focus states for interactive elements *\/\n #script-type:focus, .search-field:focus {\n border-color: #000000 !important;\n outline: none !important;\n }\n \n .search-submit:hover {\n background: linear-gradient(90deg, #020238, #07071f) !important;\n transform: translateY(-2px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n}\n\n\/* Hover effect for Share Script Link *\/\n#shareLink:hover {\n background: linear-gradient(90deg,#020238, #07071f) !important;\n transform: translateY(-2px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n}\n <\/style>\n \n <div style=\"margin: 130px auto; padding:20px; max-width: 100%; background-color: #9333ea;font-family: 'Arial', sans-serif; \/* Specifies the font family *\/border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center;\">\n \n <label for=\"code-editor\" style=\"display: block; font-size: 24px; font-weight: bold;margin-top: 23px; margin-bottom: 23px; color: #ffffff; \/* Light blue background *\/;\">Script Output:<\/label>\n <textarea id=\"code-editor\" rows=\"25\" placeholder=\"The script will be displayed here...\" \n style=\"width: 100%; max-width: 1100px; padding: 60px 20px 30px 20px; \/* Increased top padding *\/\n font-size: 14px; font-family: monospace; color: #000000; background-color: #ffffff; \n border: 2px solid #444c56; border-radius: 8px; resize: vertical; \n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 0 auto;\">\n <\/textarea>\n \n <div class=\"button-container\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <div class=\"button-container\">\n <button id=\"download-txt-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-file-alt\"><\/i>\n <span class=\"tooltiptext\">Download as .txt<\/span>\n <\/span> \n <\/button>\n \n <button id=\"download-zip-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-file-archive\"><\/i>\n <span class=\"tooltiptext\">Download as .zip<\/span>\n <\/span> \n <\/button>\n \n<button id=\"copy-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-copy\"><\/i>\n <span class=\"tooltiptext\">Copy Code Snippet<\/span>\n <\/span> \n<\/button>\n\n\n<textarea id=\"code-snippet\" style=\"position:absolute; left:-9999px;\">\nYour code snippet goes here…\n<\/textarea>\n\n\n<script>\n document.getElementById(\"copy-btn\").addEventListener(\"click\", function() {\n const textArea = document.getElementById(\"code-editor\");\n textArea.select();\n document.execCommand(\"copy\");\n alert(\"Script copied to clipboard!\");\n });\n<\/script>\n <style>\n \/* Container for buttons *\/\n .button-container {\n display: flex;\n justify-content: center; \/* Centers buttons horizontally *\/\n align-items: center; \/* Ensures buttons are aligned vertically *\/\n gap: 10px; \/* Space between buttons *\/\n margin-top: 20px;\n padding: 10px;\n }\n\n\n \/* Tooltip container *\/\n.tooltip {\n position: relative;\n display: inline-block;\n text-align: center;\n}\n\n\/* Tooltip text *\/\n.tooltip .tooltiptext {\n visibility: hidden;\n background-color: #333;\n color: #fff;\n text-align: center;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n bottom: 125%; \/* Position above the button *\/\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n\/* Tooltip arrow *\/\n.tooltip .tooltiptext::after {\n content: '';\n position: absolute;\n top: 100%; \/* Arrow at the bottom *\/\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #333 transparent transparent transparent;\n}\n\n\/* Show tooltip on hover *\/\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n \n \/* Common button styling *\/\n .action-button {\n padding: 12px 80px; \/* Uniform padding for all buttons *\/\n font-size: 14px;\n font-weight: normal;\n border-radius: 10px;\n background-color: #1e293b;\n color: white;\n cursor: pointer;\n border: none;\n transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n white-space: nowrap; \/* Prevents buttons from wrapping to the next line *\/\n width: auto; \/* Ensures that the buttons maintain their size *\/\n }\n \n \n \/* Hover effects *\/\n .action-button:hover {\n background: linear-gradient(90deg, #020238, #07071f) !important;\n transform: translateY(-3px); \/* Slightly lift the button *\/\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n }\n \/* Align logo to the left and parallel to sidebar *\/\n.site-logo {\n float: left;\n margin-left: 20px; \/* Adjust the margin if needed *\/\n display: flex;\n align-items: center;\n}\n\n.site-sidebar {\n float: left;\n margin-left: 150px; \/* Adjust this value to align with the logo *\/\n}\n\n\/* Optional: Adjust header height if logo overlaps *\/\nheader.site-header {\n display: flex;\n align-items: center;\n}\n\n \/* Focus effects *\/\n .action-button:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); \/* Adds an outline effect *\/\n }\n \n \/* Media query for responsive design *\/\n @media (max-width: 768px) {\n .button-container {\n flex-direction: column; \/* Stacks buttons vertically on smaller screens *\/\n }\n \n .action-button {\n width: 100%; \/* Full-width buttons on smaller screens *\/\n }\n }\n <\/style>\n \n \n <style>\n \/* Responsive layout adjustment *\/\n @media (max-width: 800px) {\n .wp-block-group {\n max-width: 90%;\n margin: 0 auto;\n }\n }\n <\/style>\n \n \n <div style=\"height:var(--wp--preset--spacing--90)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n <\/div>\n <\/main>\n \n <style>\n \/* Style the select element *\/\n #script-type {\n padding: 10px 60px 10px 10px; \/* Adjusted right padding for arrow *\/\n font-size: 16px;\n border: 2px solid #ccc;\n border-radius: 50px;\n background-color: #ffffff;\n cursor: pointer;\n transition: border-color 0.3s ease;\n appearance: none; \/* Remove default arrow *\/\n background-image: url('data:image\/svg+xml,%3Csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"6\" viewBox=\"0 0 10 6\"%3E%3Cpath fill=\"%23333\" d=\"M0 0l5 6 5-6H0z\"\/%3E%3C\/svg%3E'); \/* Custom arrow *\/\n background-repeat: no-repeat;\n background-position: right 5px center; \/* Position arrow *\/\n }\n \n \/* Optional: Add hover or focus effects *\/\n #script-type:hover, #script-type:focus {\n border-color: #4a90e2;\n }\n <\/style>\n \n <script>\n document.getElementById(\"copy-btn\").addEventListener(\"click\", function() {\n const textArea = document.getElementById(\"code-editor\").value;\n textArea.select();\n document.execCommand(\"copy\");\n alert(\"Script copied to clipboard!\");\n });\n <\/script>\n \n <style>\n .editor-container {\n position: relative;\n max-width: 600px;\n margin: 0 auto;\n }\n \n \n \n #copy-btn:hover {\n background-color: #001a33;\n }\n <\/style>\n \n <style>\n \/* Container for buttons *\/\n .button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px; \/* Space between buttons *\/\n margin-top: 20px;\n }\n \n \/* Common button styling *\/\n .action-button {\n padding: 10px 70px;\n font-size: 14px;\n font-weight: bold;\n border-radius: 25px;\n background-color: #000000;\n color: white;\n cursor: pointer;\n border: none;\n transition: background-color 0.3s ease, transform 0.3s ease;\n text-align: center;\n }\n \n \/* Hover effects *\/\n .action-button:hover {\n background-color: #333333;\n transform: scale(1.05); \/* Slightly enlarges the button *\/\n }\n \n \/* Focus effects *\/\n .action-button:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); \/* Adds an outline effect *\/\n }\n <\/style>\n <script>\n \/\/ Function to download script as a .txt file\n document.getElementById(\"download-txt-btn\").addEventListener(\"click\", function() {\n const textAreaContent = document.getElementById(\"code-editor\").value;\n const blob = new Blob([textAreaContent], { type: \"text\/plain\" });\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(blob);\n link.download = \"script.txt\";\n link.click();\n });\n \n \/\/ Function to download script as a .zip file\n document.getElementById(\"download-zip-btn\").addEventListener(\"click\", function() {\n const textAreaContent = document.getElementById(\"code-editor\").value;\n \n \/\/ Create a ZIP file\n const zip = new JSZip();\n zip.file(\"script.txt\", textAreaContent);\n \n \/\/ Generate the ZIP file and trigger download\n zip.generateAsync({ type: \"blob\" }).then(function(content) {\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(content);\n link.download = \"script.zip\";\n link.click();\n });\n });\n <\/script>\n \n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.7.1\/jszip.min.js\"><\/script>\n \n <style>\n button:hover {\n transform: scale(1.05); \/* Slightly enlarges the button *\/\n background: linear-gradient(135deg,#000000, #96908c); \/* Reverse the gradient on hover *\/\n }\n <\/style>\n <script>\n document.querySelector('.search-submit').addEventListener('click', function() {\n \/\/ Show the loading indicator\n document.getElementById('loadingIndicator').style.display = 'block';\n \n \/\/ Simulate a search operation (replace this with your actual search logic)\n setTimeout(function() {\n \/\/ Hide the loading indicator\n document.getElementById('loadingIndicator').style.display = 'none';\n \n \/\/ Display the search result in the output box\n document.getElementById('code-editor').value = \"Script output here\"; \/\/ Replace with actual search result\n }, 700); \/\/ Adjust time based on actual search time\n });\n <\/script>\n \n \n <style>\n .button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: -20vh; \/* This ensures vertical centering *\/\n }\n <\/style>\n \n \n\n \n \n <script>\n \/\/ Function to handle the search button click\n function generateShareableLink(scriptId) {\n \/\/ Base URL for your shareable link\n const baseUrl = \"https:\/\/devopsify.org\/?scriptId=\";\n \n \/\/ Construct the shareable URL\n const shareableLink = baseUrl + scriptId;\n \n \/\/ Show the generated link (you can add it to a textbox or alert)\n const shareLinkInput = document.getElementById(\"shareLink\");\n shareLinkInput.value = shareableLink;\n shareLinkInput.style.display = \"block\"; \/\/ Display the link input if hidden\n }\n \n \/\/ Event listener for search button click\n document.getElementById(\"searchButton\").addEventListener(\"click\", function() {\n \/\/ Get the scriptId based on your search logic (this could come from a form or API)\n \/\/ const scriptId = document.getElementById(\"scriptInput\").value;\n \n \/\/ Call the function to generate and show the shareable link\n \/\/generateShareableLink(scriptId);\n });\n <\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const codeEditor = document.getElementById('code-editor');\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n\t\t\t\tconst currentScriptId = document.getElementById('hidden-scriptId');\n\t \/\/ const scriptId = currentScriptId; \/\/ Store the scriptId of the displayed script\n\n \n \/\/ Function to fetch and display the script data\n function fetchScriptData(scriptId) {\n fetch(`https:\/\/devopsify.org:8443\/item\/${scriptId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application\/json',\n },\n })\n .then(response => response.json())\n .then(data => {\n console.log('Success:', data);\n currentScriptId = scriptId; \/\/ Set current scriptId for shareable link\n codeEditor.value = data.scriptText || \"Script not found\";\n\t\t\t currentScriptId.value = data.id|| \"ID not found\";\n scriptTypeSelect.value = data.scriptType || \"\"; \n searchInput.value = data.keyword || \"\";\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n }\n \n \/\/ Check if a scriptId exists in the URL and fetch data\n const urlParams = new URLSearchParams(window.location.search);\n\t\t\t\tconst scriptId = document.getElementById('hidden-scriptId').value;\n\t\t\t\t\n if (scriptId) {\n fetchScriptData(scriptId); \/\/ Load script data from URL if scriptId is present\n }\n \n \/\/ Share button logic\n document.getElementById('shareLink').addEventListener('click', function() {\n if (currentScriptId) {\n const shareLink = `${window.location.origin}\/?scriptId=${currentScriptId}`;\n \n \/\/ Create a temporary input field to copy the link\n const tempInput = document.createElement('input');\n tempInput.value = shareLink;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n \n \/\/ Notify the user that the link is copied\n alert(`Shareable link copied to clipboard: ${shareLink}`);\n } else {\n alert('No script is currently loaded to share.');\n }\n });\n });\n <\/script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n \/\/ Get the URL parameter for scriptId\n const urlParams = new URLSearchParams(window.location.search);\n const scriptId = urlParams.get(\"scriptId\");\n console.log(\"NO scriptID:\", scriptId);\n \/\/ Check if scriptId exists in the URL and fetch the script if it does\n if (scriptId) {\n fetchScript(scriptId); \/\/ Call the function to fetch and display script data\n }\n});\n\nfunction fetchScript(scriptId) {\n \/\/ Replace this with the actual API endpoint for fetching script data\n const apiEndpoint = `https:\/\/devopsify.org:8443\/item\/${scriptId}`;\n\n \/\/ Fetch script data from the API\n fetch(apiEndpoint)\n .then(response => {\n if (!response.ok) {\n throw new Error(\"Network response was not ok.\");\n }\n return response.json();\n })\n .then(data => {\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n const outputBox = document.getElementById(\"code-editor\");\n outputBox.textContent = data.scriptText || \"Script not found\";\n outputBox.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\tsearchInput.value = (data.keyword || \"Search Text not found\").replace(\/,\/g, ' ');\n searchInput.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\tscriptTypeSelect.value = data.scriptType || 0;\n scriptTypeSelect.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\t\n })\n .catch(error => {\n console.error(\"Error fetching script:\", error);\n document.getElementById(\"code-editor\").textContent = \"Error loading script.\";\n });\n}\n\n <\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Script Search and Share Script Type: BashPythonRubyPerlPowerShell Loading script, please wait… Script Output: Download as .txt Download as .zip Copy Code Snippet Your code snippet goes here…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-290","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devopsify.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=290"}],"version-history":[{"count":143,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions"}],"predecessor-version":[{"id":1938,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions\/1938"}],"wp:attachment":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":290,"date":"2025-01-14T08:40:42","date_gmt":"2025-01-14T08:40:42","guid":{"rendered":"https:\/\/devopsify.org\/?page_id=290"},"modified":"2025-05-28T08:21:02","modified_gmt":"2025-05-28T08:21:02","slug":"290-2","status":"publish","type":"page","link":"https:\/\/devopsify.org\/?page_id=290","title":{"rendered":""},"content":{"rendered":"\n\n \n \n \n \n Script Search and Share<\/title>\n <style>\n\n .custom-search-button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 85px;\n background-color:#9333ea;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 1097px;\nmargin-top: -80px; \/* Reset top margin *\/\n padding-top: -40px; \/* Add spacing at the top *\/\n \n margin: -70px auto; \/* Removes default margin *\/\n position: relative; \/* Ensures position adjustments work *\/\n \n \n }\n .search-form {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n align-items: center;\n width: 100%;\n\n }\n .search-form label {\n font-size: 24px;\n font-weight: bold;\n max-width: 300px;\n margin-right: 40px;\n color: #FFFFFF;\n font-family: 'Arial', sans-serif; \/* Specifies the font family *\/\n\n\n }\n\n\/* Active States *\/\n.button:active {\n transform: translateY(0); \/* Reset lift on click *\/\n}\n\n \n #script-type {\n width: 200px;\n padding: 12px 20px;\n font-size: 16px;\n border: 2px solid #6c6f74;\n border-radius: 10px;\n background-color: #ffffff;\n cursor: pointer;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n appearance: none;\n }\n .search-field {\n padding: 12px 30px;\n font-size: 16px;\n border: 2px solid #6c6f74;\n border-radius: 25px;\n flex-grow: 1;\n transition: border-color 0.3s ease;\n max-width: 500px;\n }\n .search-submit {\n padding: 12px 35px;\n font-weight: bold;\n border: none;\n border-radius: 25px;\n background-color: #050505;\n color: white;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .scriptOutput {\n margin-top: 20px;\n border: 1px solid #ccc;\n padding: 10px;\n min-height: 100px;\n \n \n }\n #shareBtn, #shareLink {\n margin-top: 10px;\n }\n <\/style>\n <\/head>\n <body>\n <div class=\"wp-block-search custom-search-button\">\n <form role=\"search\" method=\"get\" class=\"search-form\" id=\"searchForm\">\n \n <label for=\"script-type\">Script Type:<\/label>\n <select id=\"script-type\" style=\"padding: 10px; font-weight: bold; border-radius: 5px; border: 2px solid #2e1294;\">\n <option value=\"bash\" selected=\"selected\">Bash<\/option>\n <option value=\"python\">Python<\/option>\n <option value=\"ruby\">Ruby<\/option>\n <option value=\"perl\">Perl<\/option>\n <option value=\"powershell\">PowerShell<\/option>\n\n <\/select>\n \n \n <input type=\"search\" id=\"search-form-1\" class=\"search-field\" placeholder=\"\ud83d\udd0d Search\u2026\" name=\"s\" title=\"Search for:\" style=\"padding: 10px; font-weight: bold; border: 2px solid #2e1294; border-radius: 5px;\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n\n \n<button id=\"searchButton\" type=\"submit\" class=\"search-submit\" title=\"Search\" style=\"padding: 8px 15px; background-color: #000000; color: white; border: none; border-radius: 25px; font-size: 1em; cursor: pointer; transition: background-color 0.3s;\">\n <i class=\"fas fa-search\"><\/i> \n<\/button>\n\n\n<a id=\"shareLink\" href=\"\" target=\"_blank\" rel=\"noopener\" title=\"Share Script Link\" style=\"display: inline-block; margin-top: 15px; margin-bottom: 15px; padding: 5px 15px; font-weight: bold; border-radius: 25px; background-color: #000000; color: white; text-decoration: none; font-size: 1em; text-align: center; transition: background-color 0.3s;\">\n <i class=\"fas fa-share-alt\"><\/i> \n<\/a>\n<\/button>\n\n \n <\/form>\n <\/div>\n \n \n \n \n <script>\n\t\t\tfunction postScriptData() {\n\t\t\t const codeEditor = document.getElementById('code-editor');\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n\t\t\t\tconst currentScriptId = document.getElementById('hidden-scriptId')\n\t\t\t\tconst payload = {\n\t\t\t\t\tid: \"\",\n\t\t\t\t\tscriptType: scriptTypeSelect.value,\n\t\t\t\t\tscriptText: codeEditor.value,\n\t\t\t\t\tkeyword: searchInput.value\n\t\t\t\t};\n\n\t\t\t\treturn fetch(\"https:\/\/devopsify.org:8443\/item\", {\n\t\t\t\t\tmethod: \"POST\",\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t\"Content-Type\": \"application\/json\"\n\t\t\t\t\t},\n\t\t\t\t\tbody: JSON.stringify(payload)\n\t\t\t\t})\n\t\t\t\t.then(response => {\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\tthrow new Error(\"Failed to post script\");\n\t\t\t\t\t}\n\t\t\t\t\treturn response.json(); \/\/ Ensure it returns the JSON response\n\t\t\t\t})\n\t\t\t\t.then(data => {\n\t\t\t\t\tconsole.log(\"POST Response:\", data);\n\t\t\t\t\treturn data; \/\/ Return the actual data\n\t\t\t\t})\n\t\t\t\t.catch(error => {\n\t\t\t\t\tconsole.error(\"Error posting script:\", error);\n\t\t\t\t\treturn { error: \"Error posting script.\" }; \/\/ Return an error object instead of failing silently\n\t\t\t\t});\n\t\t\t}\n\n function fetchScriptOutput(scriptId) {\n return fetch(`https:\/\/devopsify.org:8443\/item\/${encodeURIComponent(scriptId)}`)\n .then(response => response.json())\n .then(data => {\n if (data && data.script) {\n\t\t\t\t\t\t\tconsole.log(\"found1:{}\",scriptId);\n return data.script;\n } else {\n\t\t\t\t\t\t\tconsole.log(\"notfound1:{}\",scriptId);\n throw new Error('Script not found');\n }\n })\n .catch(error => {\n console.error('Error fetching script:', error);\n return 'Error fetching script.';\n });\n }\n \n function handleSearch(event) {\n event.preventDefault();\n \t\t\tconst baseUrl = `https:\/\/devopsify.org\/?page_id=290`;\n\t\t\t\twindow.history.pushState({}, '', baseUrl);\n const urlParams = new URLSearchParams(window.location.search);\n\n\t\t\t\tpostScriptData().then(output => {\n\t\t\t\t\t\tconsole.log(\"added:\",output.scriptText);\n\t\t\t\t\t\tconst newUrl = `https:\/\/devopsify.org\/?page_id=290&scriptId=${encodeURIComponent(output.id)}`;\n\t\t\t\t\t\twindow.history.pushState({}, '', newUrl);\n document.getElementById('code-editor').value = output.scriptText;\n\n\t\t\t\t\t\t\/\/const newUrl = `https:\/\/devopsify.org\/?scriptId=${encodeURIComponent(output.id)}`;\n const shareBtn = document.getElementById('shareBtn');\n shareBtn.style.display = \"inline-block\";\n });\n\t\t\t\t\tconsole.log(\"notfound2:{}\",scriptId);\n }\n \n\n document.getElementById('searchForm').addEventListener('submit', handleSearch);\n\t\t\tdocument.getElementById('shareBtn').addEventListener('click', function() {\n\t\t\t\tconst pageUrl = window.location.href; \/\/ Get the current page URL\n\n\t\t\t\tnavigator.clipboard.writeText(pageUrl).then(() => {\n\t\t\t\t\talert('Link copied: ' + pageUrl);\n\t\t\t\t}).catch(err => {\n\t\t\t\t\tconsole.error('Failed to copy:', err);\n\t\t\t\t});\n\t\t\t});\n\n <\/script>\n <\/body>\n \n \n \n \n <\/form>\n <div id=\"loadingIndicator\" style=\"display: none; text-align: center; margin-top: 100px;\">\n <p>\n <span class=\"spinner\"><\/span> \n Loading script, please wait…\n <\/p>\n <\/div>\n \n \n \n <style>\n #loadingIndicator {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80px; \/* Adjust based on your layout *\/\n text-align: center;\n margin-top: 10px;\n }\n \n .spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 4px solid #000000;\n width: 20px; \/* Size of the spinner *\/\n height: 20px; \/* Size of the spinner *\/\n animation: spin 1s linear infinite;\n display: inline-block; \/* Keeps the spinner inline with the text *\/\n margin-right: 10px; \/* Space between spinner and text *\/\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n #loadingIndicator p {\n margin: 0;\n font-size: 16px; \/* Font size for the loading text *\/\n color: #333; \/* Color of the loading text *\/\n display: flex; \/* Flex container for better alignment *\/\n align-items: center; \/* Aligns spinner and text vertically *\/\n justify-content: center; \/* Center the text horizontally *\/\n gap: 10px; \/* Space between spinner and text *\/\n }\n \n \n \n <\/style>\n \n <style>\n \/* Add responsive styles *\/\n @media (max-width: 600px) {\n .search-form {\n flex-direction: column !important;\n gap: 15px !important;\n }\n \n .search-field, .search-submit, #script-type {\n width: 100% !important;\n }\n }\n \n \/* Focus states for interactive elements *\/\n #script-type:focus, .search-field:focus {\n border-color: #000000 !important;\n outline: none !important;\n }\n \n .search-submit:hover {\n background: linear-gradient(90deg, #020238, #07071f) !important;\n transform: translateY(-2px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n}\n\n\/* Hover effect for Share Script Link *\/\n#shareLink:hover {\n background: linear-gradient(90deg,#020238, #07071f) !important;\n transform: translateY(-2px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n}\n <\/style>\n \n <div style=\"margin: 130px auto; padding:20px; max-width: 100%; background-color: #9333ea;font-family: 'Arial', sans-serif; \/* Specifies the font family *\/border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center;\">\n \n <label for=\"code-editor\" style=\"display: block; font-size: 24px; font-weight: bold;margin-top: 23px; margin-bottom: 23px; color: #ffffff; \/* Light blue background *\/;\">Script Output:<\/label>\n <textarea id=\"code-editor\" rows=\"25\" placeholder=\"The script will be displayed here...\" \n style=\"width: 100%; max-width: 1100px; padding: 60px 20px 30px 20px; \/* Increased top padding *\/\n font-size: 14px; font-family: monospace; color: #000000; background-color: #ffffff; \n border: 2px solid #444c56; border-radius: 8px; resize: vertical; \n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 0 auto;\">\n <\/textarea>\n \n <div class=\"button-container\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <div class=\"button-container\">\n <button id=\"download-txt-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-file-alt\"><\/i>\n <span class=\"tooltiptext\">Download as .txt<\/span>\n <\/span> \n <\/button>\n \n <button id=\"download-zip-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-file-archive\"><\/i>\n <span class=\"tooltiptext\">Download as .zip<\/span>\n <\/span> \n <\/button>\n \n<button id=\"copy-btn\" class=\"action-button\">\n <span class=\"tooltip\">\n <i class=\"fas fa-copy\"><\/i>\n <span class=\"tooltiptext\">Copy Code Snippet<\/span>\n <\/span> \n<\/button>\n\n\n<textarea id=\"code-snippet\" style=\"position:absolute; left:-9999px;\">\nYour code snippet goes here…\n<\/textarea>\n\n\n<script>\n document.getElementById(\"copy-btn\").addEventListener(\"click\", function() {\n const textArea = document.getElementById(\"code-editor\");\n textArea.select();\n document.execCommand(\"copy\");\n alert(\"Script copied to clipboard!\");\n });\n<\/script>\n <style>\n \/* Container for buttons *\/\n .button-container {\n display: flex;\n justify-content: center; \/* Centers buttons horizontally *\/\n align-items: center; \/* Ensures buttons are aligned vertically *\/\n gap: 10px; \/* Space between buttons *\/\n margin-top: 20px;\n padding: 10px;\n }\n\n\n \/* Tooltip container *\/\n.tooltip {\n position: relative;\n display: inline-block;\n text-align: center;\n}\n\n\/* Tooltip text *\/\n.tooltip .tooltiptext {\n visibility: hidden;\n background-color: #333;\n color: #fff;\n text-align: center;\n padding: 5px 10px;\n border-radius: 4px;\n position: absolute;\n bottom: 125%; \/* Position above the button *\/\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n\/* Tooltip arrow *\/\n.tooltip .tooltiptext::after {\n content: '';\n position: absolute;\n top: 100%; \/* Arrow at the bottom *\/\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #333 transparent transparent transparent;\n}\n\n\/* Show tooltip on hover *\/\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n \n \/* Common button styling *\/\n .action-button {\n padding: 12px 80px; \/* Uniform padding for all buttons *\/\n font-size: 14px;\n font-weight: normal;\n border-radius: 10px;\n background-color: #1e293b;\n color: white;\n cursor: pointer;\n border: none;\n transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n white-space: nowrap; \/* Prevents buttons from wrapping to the next line *\/\n width: auto; \/* Ensures that the buttons maintain their size *\/\n }\n \n \n \/* Hover effects *\/\n .action-button:hover {\n background: linear-gradient(90deg, #020238, #07071f) !important;\n transform: translateY(-3px); \/* Slightly lift the button *\/\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n }\n \/* Align logo to the left and parallel to sidebar *\/\n.site-logo {\n float: left;\n margin-left: 20px; \/* Adjust the margin if needed *\/\n display: flex;\n align-items: center;\n}\n\n.site-sidebar {\n float: left;\n margin-left: 150px; \/* Adjust this value to align with the logo *\/\n}\n\n\/* Optional: Adjust header height if logo overlaps *\/\nheader.site-header {\n display: flex;\n align-items: center;\n}\n\n \/* Focus effects *\/\n .action-button:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); \/* Adds an outline effect *\/\n }\n \n \/* Media query for responsive design *\/\n @media (max-width: 768px) {\n .button-container {\n flex-direction: column; \/* Stacks buttons vertically on smaller screens *\/\n }\n \n .action-button {\n width: 100%; \/* Full-width buttons on smaller screens *\/\n }\n }\n <\/style>\n \n \n <style>\n \/* Responsive layout adjustment *\/\n @media (max-width: 800px) {\n .wp-block-group {\n max-width: 90%;\n margin: 0 auto;\n }\n }\n <\/style>\n \n \n <div style=\"height:var(--wp--preset--spacing--90)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n <\/div>\n <\/main>\n \n <style>\n \/* Style the select element *\/\n #script-type {\n padding: 10px 60px 10px 10px; \/* Adjusted right padding for arrow *\/\n font-size: 16px;\n border: 2px solid #ccc;\n border-radius: 50px;\n background-color: #ffffff;\n cursor: pointer;\n transition: border-color 0.3s ease;\n appearance: none; \/* Remove default arrow *\/\n background-image: url('data:image\/svg+xml,%3Csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"6\" viewBox=\"0 0 10 6\"%3E%3Cpath fill=\"%23333\" d=\"M0 0l5 6 5-6H0z\"\/%3E%3C\/svg%3E'); \/* Custom arrow *\/\n background-repeat: no-repeat;\n background-position: right 5px center; \/* Position arrow *\/\n }\n \n \/* Optional: Add hover or focus effects *\/\n #script-type:hover, #script-type:focus {\n border-color: #4a90e2;\n }\n <\/style>\n \n <script>\n document.getElementById(\"copy-btn\").addEventListener(\"click\", function() {\n const textArea = document.getElementById(\"code-editor\").value;\n textArea.select();\n document.execCommand(\"copy\");\n alert(\"Script copied to clipboard!\");\n });\n <\/script>\n \n <style>\n .editor-container {\n position: relative;\n max-width: 600px;\n margin: 0 auto;\n }\n \n \n \n #copy-btn:hover {\n background-color: #001a33;\n }\n <\/style>\n \n <style>\n \/* Container for buttons *\/\n .button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px; \/* Space between buttons *\/\n margin-top: 20px;\n }\n \n \/* Common button styling *\/\n .action-button {\n padding: 10px 70px;\n font-size: 14px;\n font-weight: bold;\n border-radius: 25px;\n background-color: #000000;\n color: white;\n cursor: pointer;\n border: none;\n transition: background-color 0.3s ease, transform 0.3s ease;\n text-align: center;\n }\n \n \/* Hover effects *\/\n .action-button:hover {\n background-color: #333333;\n transform: scale(1.05); \/* Slightly enlarges the button *\/\n }\n \n \/* Focus effects *\/\n .action-button:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); \/* Adds an outline effect *\/\n }\n <\/style>\n <script>\n \/\/ Function to download script as a .txt file\n document.getElementById(\"download-txt-btn\").addEventListener(\"click\", function() {\n const textAreaContent = document.getElementById(\"code-editor\").value;\n const blob = new Blob([textAreaContent], { type: \"text\/plain\" });\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(blob);\n link.download = \"script.txt\";\n link.click();\n });\n \n \/\/ Function to download script as a .zip file\n document.getElementById(\"download-zip-btn\").addEventListener(\"click\", function() {\n const textAreaContent = document.getElementById(\"code-editor\").value;\n \n \/\/ Create a ZIP file\n const zip = new JSZip();\n zip.file(\"script.txt\", textAreaContent);\n \n \/\/ Generate the ZIP file and trigger download\n zip.generateAsync({ type: \"blob\" }).then(function(content) {\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(content);\n link.download = \"script.zip\";\n link.click();\n });\n });\n <\/script>\n \n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.7.1\/jszip.min.js\"><\/script>\n \n <style>\n button:hover {\n transform: scale(1.05); \/* Slightly enlarges the button *\/\n background: linear-gradient(135deg,#000000, #96908c); \/* Reverse the gradient on hover *\/\n }\n <\/style>\n <script>\n document.querySelector('.search-submit').addEventListener('click', function() {\n \/\/ Show the loading indicator\n document.getElementById('loadingIndicator').style.display = 'block';\n \n \/\/ Simulate a search operation (replace this with your actual search logic)\n setTimeout(function() {\n \/\/ Hide the loading indicator\n document.getElementById('loadingIndicator').style.display = 'none';\n \n \/\/ Display the search result in the output box\n document.getElementById('code-editor').value = \"Script output here\"; \/\/ Replace with actual search result\n }, 700); \/\/ Adjust time based on actual search time\n });\n <\/script>\n \n \n <style>\n .button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: -20vh; \/* This ensures vertical centering *\/\n }\n <\/style>\n \n \n\n \n \n <script>\n \/\/ Function to handle the search button click\n function generateShareableLink(scriptId) {\n \/\/ Base URL for your shareable link\n const baseUrl = \"https:\/\/devopsify.org\/?scriptId=\";\n \n \/\/ Construct the shareable URL\n const shareableLink = baseUrl + scriptId;\n \n \/\/ Show the generated link (you can add it to a textbox or alert)\n const shareLinkInput = document.getElementById(\"shareLink\");\n shareLinkInput.value = shareableLink;\n shareLinkInput.style.display = \"block\"; \/\/ Display the link input if hidden\n }\n \n \/\/ Event listener for search button click\n document.getElementById(\"searchButton\").addEventListener(\"click\", function() {\n \/\/ Get the scriptId based on your search logic (this could come from a form or API)\n \/\/ const scriptId = document.getElementById(\"scriptInput\").value;\n \n \/\/ Call the function to generate and show the shareable link\n \/\/generateShareableLink(scriptId);\n });\n <\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const codeEditor = document.getElementById('code-editor');\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n\t\t\t\tconst currentScriptId = document.getElementById('hidden-scriptId');\n\t \/\/ const scriptId = currentScriptId; \/\/ Store the scriptId of the displayed script\n\n \n \/\/ Function to fetch and display the script data\n function fetchScriptData(scriptId) {\n fetch(`https:\/\/devopsify.org:8443\/item\/${scriptId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application\/json',\n },\n })\n .then(response => response.json())\n .then(data => {\n console.log('Success:', data);\n currentScriptId = scriptId; \/\/ Set current scriptId for shareable link\n codeEditor.value = data.scriptText || \"Script not found\";\n\t\t\t currentScriptId.value = data.id|| \"ID not found\";\n scriptTypeSelect.value = data.scriptType || \"\"; \n searchInput.value = data.keyword || \"\";\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n }\n \n \/\/ Check if a scriptId exists in the URL and fetch data\n const urlParams = new URLSearchParams(window.location.search);\n\t\t\t\tconst scriptId = document.getElementById('hidden-scriptId').value;\n\t\t\t\t\n if (scriptId) {\n fetchScriptData(scriptId); \/\/ Load script data from URL if scriptId is present\n }\n \n \/\/ Share button logic\n document.getElementById('shareLink').addEventListener('click', function() {\n if (currentScriptId) {\n const shareLink = `${window.location.origin}\/?scriptId=${currentScriptId}`;\n \n \/\/ Create a temporary input field to copy the link\n const tempInput = document.createElement('input');\n tempInput.value = shareLink;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n \n \/\/ Notify the user that the link is copied\n alert(`Shareable link copied to clipboard: ${shareLink}`);\n } else {\n alert('No script is currently loaded to share.');\n }\n });\n });\n <\/script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n \/\/ Get the URL parameter for scriptId\n const urlParams = new URLSearchParams(window.location.search);\n const scriptId = urlParams.get(\"scriptId\");\n console.log(\"NO scriptID:\", scriptId);\n \/\/ Check if scriptId exists in the URL and fetch the script if it does\n if (scriptId) {\n fetchScript(scriptId); \/\/ Call the function to fetch and display script data\n }\n});\n\nfunction fetchScript(scriptId) {\n \/\/ Replace this with the actual API endpoint for fetching script data\n const apiEndpoint = `https:\/\/devopsify.org:8443\/item\/${scriptId}`;\n\n \/\/ Fetch script data from the API\n fetch(apiEndpoint)\n .then(response => {\n if (!response.ok) {\n throw new Error(\"Network response was not ok.\");\n }\n return response.json();\n })\n .then(data => {\n const scriptTypeSelect = document.getElementById('script-type');\n const searchInput = document.querySelector('.search-field');\n const outputBox = document.getElementById(\"code-editor\");\n outputBox.textContent = data.scriptText || \"Script not found\";\n outputBox.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\tsearchInput.value = (data.keyword || \"Search Text not found\").replace(\/,\/g, ' ');\n searchInput.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\tscriptTypeSelect.value = data.scriptType || 0;\n scriptTypeSelect.style.display = \"block\"; \/\/ Make sure the output box is visible\n\t\t\t\n })\n .catch(error => {\n console.error(\"Error fetching script:\", error);\n document.getElementById(\"code-editor\").textContent = \"Error loading script.\";\n });\n}\n\n <\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Script Search and Share Script Type: BashPythonRubyPerlPowerShell Loading script, please wait… Script Output: Download as .txt Download as .zip Copy Code Snippet Your code snippet goes here…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-290","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devopsify.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=290"}],"version-history":[{"count":143,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions"}],"predecessor-version":[{"id":1938,"href":"https:\/\/devopsify.org\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions\/1938"}],"wp:attachment":[{"href":"https:\/\/devopsify.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}