{"id":280,"date":"2025-02-23T08:59:55","date_gmt":"2025-02-23T08:59:55","guid":{"rendered":"https:\/\/techwizardlab.com\/?page_id=280"},"modified":"2025-02-23T09:07:17","modified_gmt":"2025-02-23T09:07:17","slug":"ai-blog-title-generator","status":"publish","type":"page","link":"https:\/\/techwizardlab.com\/index.php\/ai-blog-title-generator\/","title":{"rendered":"AI Blog Title Generator"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">    <style>\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background-color: #f4f4f4;\n            color: #333;\n            line-height: 1.6;\n            padding: 20px;\n        }\n\n        .container {\n            max-width: 600px;\n            margin: auto;\n            background: #fff;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            text-align: center;\n        }\n\n        .input-group {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 20px;\n        }\n\n        input[type=\"text\"] {\n            flex-grow: 1;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            margin-right: 10px;\n        }\n\n        button {\n            background: #007bff;\n            color: #fff;\n            border: 0;\n            padding: 10px 20px;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n\n        button:hover {\n            background: #0056b3;\n        }\n\n        .result-item {\n            background-color: #f2f2f2;\n            margin-bottom: 10px;\n            padding: 10px;\n            border-radius: 5px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .copy-button {\n            background: #007bff;\n            color: #fff;\n            border: none;\n            padding: 5px 10px;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n\n        .copy-button:hover {\n            background: #0056b3;\n        }\n\n        .image-container {\n            margin-bottom: 20px;\n        }\n\n        @media screen and (max-width: 768px) {\n            body, .container, .input-group {\n                padding: 10px;\n            }\n        }\n    .hidden {\n            display: none;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"input-group\">\n            <input type=\"text\" id=\"inputInput\" placeholder=\"Enter a input (e.g., Facebook Ads)\">\n            <button id=\"generateButton\">Generate Titles<\/button>\n        <\/div>\n        <div id=\"imageContainer\" class=\"image-container\">\n            <img decoding=\"async\" src=\"http:\/\/wordpress-test.local\/wp-content\/uploads\/2024\/03\/get_started.png\" alt=\"Getting Started\" style=\"max-width: 100%;\">\n        <\/div>\n\n        <ul id=\"titleList\"><\/ul>\n\n        \n    <\/div>\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const generateButton = document.getElementById('generateButton');\n            const titleList = document.getElementById('titleList');\n            const inputInput = document.getElementById('inputInput');\n            const imageContainer = document.getElementById('imageContainer');\n\n            generateButton.addEventListener('click', function() {\n                const input = inputInput.value;\n                if (!input) {\n                    alert('Please enter a input.');\n                    return;\n                }\n\n                imageContainer.innerHTML = '<img decoding=\"async\" src=\"http:\/\/wordpress-test.local\/wp-content\/uploads\/2024\/03\/loading.webp\" alt=\"Loading\" style=\"max-width: 20%;\">'; \/\/ Replace 'http:\/\/wordpress-test.local\/wp-content\/uploads\/2024\/03\/loading.webp' with your loading GIF\n\n        \/\/ Clear existing titles and show the loading GIF\n                titleList.innerHTML = '';\n                imageContainer.classList.remove('hidden'); \n\n                fetch('https:\/\/techwizardlab.com\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application\/x-www-form-urlencoded'\n                    },\n                    body: 'action=custom_tool_run&input=' + encodeURIComponent(input)\n                })\n                .then(response => response.json())\n                .then(jsonResponse => {\n                    titleList.innerHTML = '';\n                    if (jsonResponse.success) {\n                        const titles = jsonResponse.data[0].titles;\n\n                        titles.forEach(title => {\n                            let listItem = document.createElement('li');\n                            listItem.className = 'result-item';\n                            listItem.innerHTML = `<span>${title}<\/span> <button class=\"copy-button\" onclick=\"copyToClipboard('${title}')\">Copy<\/button>`;\n                            titleList.appendChild(listItem);\n                        });\n                        imageContainer.classList.add('hidden'); \/\/ Hide the image container\n                    } else {\n                        console.error('Failed to fetch titles');\n            imageContainer.innerHTML = '<img decoding=\"async\" src=\"http:\/\/wordpress-test.local\/wp-content\/uploads\/2024\/03\/error_image.png\" alt=\"Error\" style=\"max-width: 100%;\">' +\n                                               '<p>Oops! Something went wrong. Please try again.<\/p>';                   }\n                })\n                .catch(error => {\n                    console.error('Error:', error);\n                    imageContainer.innerHTML = '<img decoding=\"async\" src=\"http:\/\/wordpress-test.local\/wp-content\/uploads\/2024\/03\/error_image.png\" alt=\"Error\" style=\"max-width: 100%;\">' +\n                                               '<p>Oops! Something went wrong. Please try again.<\/p>'; \n\n                });\n            });\n\n            window.copyToClipboard = function(text) {\n            var textArea = document.createElement(\"textarea\");\n            textArea.value = text;\n            textArea.style.top = \"0\";\n            textArea.style.left = \"0\";\n            textArea.style.position = \"fixed\";\n            document.body.appendChild(textArea);\n            textArea.focus();\n            textArea.select();\n\n            try {\n                var successful = document.execCommand('copy');\n                var msg = successful ? 'successful' : 'unsuccessful';\n                alert('Copying text was ' + msg);\n            } catch (err) {\n                alert('Unable to copy text');\n                console.error('Unable to copy', err);\n            }\n\n            document.body.removeChild(textArea);\n        };\n\n        });\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Generate Titles<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Admin","author_link":"https:\/\/techwizardlab.com\/index.php\/author\/wizardadministrator\/"},"uagb_comment_info":0,"uagb_excerpt":"Generate Titles","_links":{"self":[{"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":2,"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/pages\/280\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/techwizardlab.com\/index.php\/wp-json\/wp\/v2\/media?parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}