Structured Prompt Builder<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Inter', sans-serif; }\r\n .scrollbar-hide::-webkit-scrollbar { display: none; }\r\n .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800\">\r\n <div id=\"app\" class=\"min-h-screen p-4 md:p-8\">\r\n <div class=\"max-w-6xl mx-auto\">\r\n \r\n <header class=\"mb-8 text-center md:text-left\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900 mb-2 tracking-tight\">\r\n Structured Prompt Builder\r\n <\/h1>\r\n <p class=\"text-slate-600 max-w-2xl\">\r\n Based on the 5-step framework (Role, Reference, Task, Constraints, Output) to generate highly effective AI prompts.\r\n <\/p>\r\n <\/header>\r\n\r\n <div class=\"flex flex-col lg:flex-row gap-8\">\r\n \r\n <div class=\"flex-1 space-y-6\">\r\n \r\n \r\n <div class=\"bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl shadow-sm border border-indigo-100 p-6\">\r\n <div class=\"flex items-center gap-2 mb-4\">\r\n <i data-lucide=\"sparkles\" class=\"w-5 h-5 text-indigo-600\"><\/i>\r\n <h2 class=\"text-lg font-bold text-indigo-950\">AI Prompt Enhancer<\/h2>\r\n <\/div>\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\r\n Describe what you want in simple terms\r\n <\/label>\r\n <textarea\r\n id=\"simplePrompt\"\r\n placeholder=\"e.g., Write a blog post about artificial intelligence for beginners...\"\r\n class=\"w-full min-h-[80px] p-3 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white text-slate-700 outline-none\"\r\n ><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-indigo-900 mb-2\">\r\n Number of options to generate\r\n <\/label>\r\n <div id=\"optionCountsContainer\" class=\"flex flex-wrap gap-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <button\r\n id=\"generateBtn\"\r\n onclick=\"generateEnhancements()\"\r\n class=\"flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium shadow-sm transition-all cursor-pointer\"\r\n >\r\n <i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i>\r\n <span>Enhance with AI<\/span>\r\n <\/button>\r\n <\/div>\r\n <p id=\"apiError\" class=\"text-sm text-red-500 mt-2 hidden\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"optionsBar\" class=\"bg-white p-2 rounded-xl shadow-sm border border-slate-200 flex overflow-x-auto gap-2 scrollbar-hide hidden\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\" id=\"accordionContainer\">\r\n \r\n <\/div>\r\n \r\n <div class=\"flex justify-end\">\r\n <button \r\n onclick=\"resetAll()\"\r\n class=\"flex items-center gap-2 text-sm text-slate-500 hover:text-red-600 py-2 px-4 rounded-lg hover:bg-red-50 cursor-pointer transition-colors\"\r\n >\r\n <i data-lucide=\"refresh-cw\" class=\"w-4 h-4\"><\/i>\r\n Clear All Fields\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:w-[450px] w-full flex flex-col h-[600px] lg:sticky lg:top-6\">\r\n <div class=\"bg-slate-900 rounded-2xl shadow-xl flex flex-col h-full overflow-hidden border border-slate-700\">\r\n <div class=\"bg-slate-800 p-4 border-b border-slate-700 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"flex gap-1.5\">\r\n <div class=\"w-3 h-3 rounded-full bg-red-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-green-500\/80\"><\/div>\r\n <\/div>\r\n <span class=\"text-slate-200 font-medium ml-2 text-sm\">Generated Prompt<\/span>\r\n <\/div>\r\n \r\n <button\r\n id=\"copyBtn\"\r\n onclick=\"copyPrompt()\"\r\n class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all bg-blue-600 hover:bg-blue-500 text-white cursor-pointer\"\r\n >\r\n <i data-lucide=\"copy\" class=\"w-4 h-4\" id=\"copyIcon\"><\/i>\r\n <span id=\"copyText\">Copy Prompt<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"flex-1 overflow-hidden flex flex-col bg-slate-900 relative\">\r\n <div id=\"emptyPromptState\" class=\"absolute inset-0 flex flex-col items-center justify-center text-slate-500 gap-4 opacity-50 p-6 pointer-events-none\">\r\n <i data-lucide=\"layout-list\" class=\"w-12 h-12\"><\/i>\r\n <p class=\"text-center text-sm\">Start filling out the fields or use AI Enhancer to see your prompt build here.<\/p>\r\n <\/div>\r\n <textarea\r\n id=\"finalPromptBox\"\r\n oninput=\"handleFinalPromptInput(this.value)\"\r\n class=\"flex-1 w-full h-full bg-slate-900 text-slate-300 font-mono text-sm leading-relaxed p-6 resize-none focus:outline-none z-10\"\r\n ><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-950 p-3 text-xs text-slate-500 text-center border-t border-slate-800\">\r\n Edit the text directly above to make final tweaks, then click Copy.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ State management\r\n let state = {\r\n activeStep: 0,\r\n numOptions: 3,\r\n isGenerating: false,\r\n generatedOptions: [],\r\n selectedOptionIndex: -1,\r\n apiError: '',\r\n formData: {\r\n role: '',\r\n reference: '',\r\n task: '',\r\n constraints: '',\r\n output: ''\r\n },\r\n finalPrompt: '',\r\n isAiPolished: false\r\n };\r\n\r\n const optionCounts = [1, 3, 5, 7, 9, 12, 20];\r\n\r\n const stepsConfig = [\r\n {\r\n id: 'role',\r\n title: 'Role',\r\n description: 'Define the role and objective required for the AI workflow.',\r\n placeholder: 'e.g., Act as a Senior Financial Analyst with 10 years of experience...',\r\n helper: 'Who is the AI? What expertise do they bring? Setting a persona helps tailor the response.'\r\n },\r\n {\r\n id: 'reference',\r\n title: 'Reference',\r\n description: 'Provide context, supporting information, and business requirements.',\r\n placeholder: 'e.g., We are analyzing Q3 earnings for leading cloud providers...',\r\n helper: 'What background information does the AI need? Provide context or data points.'\r\n },\r\n {\r\n id: 'task',\r\n title: 'Task',\r\n description: 'Clear instruction on what actions to take.',\r\n placeholder: 'e.g., Summarize key growth drivers and identify three potential risks...',\r\n helper: 'What exactly do you want the AI to do? Use clear action verbs.'\r\n },\r\n {\r\n id: 'constraints',\r\n title: 'Constraints',\r\n description: 'Establish limitations, formatting rules, Word count, tone.',\r\n placeholder: 'e.g., Keep the tone objective and professional. Do not exceed 500 words...',\r\n helper: 'What should the AI NOT do? Specify tone, length limits, or topics to avoid.'\r\n },\r\n {\r\n id: 'output',\r\n title: 'Output',\r\n description: 'Generate outputs as Bullet points, narrative paragraphs, or tables.',\r\n placeholder: 'e.g., Present findings in a markdown table comparing the companies...',\r\n helper: 'How should the final answer look? Specify formats like JSON, tables, or lists.'\r\n }\r\n ];\r\n\r\n \/\/ Initialize UI components on load\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderOptionCounts();\r\n renderAccordion();\r\n updatePreviewUI();\r\n lucide.createIcons();\r\n });\r\n\r\n function renderOptionCounts() {\r\n const container = document.getElementById('optionCountsContainer');\r\n container.innerHTML = optionCounts.map(count => `\r\n <button\r\n onclick=\"setNumOptions(${count})\"\r\n class=\"px-3 py-1 rounded-full text-sm font-medium transition-colors cursor-pointer ${\r\n state.numOptions === count \r\n ? 'bg-indigo-600 text-white shadow-sm' \r\n : 'bg-white text-indigo-700 hover:bg-indigo-100 border border-indigo-200'\r\n }\"\r\n >\r\n ${count}\r\n <\/button>\r\n `).join('');\r\n }\r\n\r\n function setNumOptions(count) {\r\n state.numOptions = count;\r\n renderOptionCounts();\r\n }\r\n\r\n function renderOptionsBar() {\r\n const bar = document.getElementById('optionsBar');\r\n if (state.generatedOptions.length === 0) {\r\n bar.classList.add('hidden');\r\n return;\r\n }\r\n bar.classList.remove('hidden');\r\n bar.innerHTML = state.generatedOptions.map((_, index) => `\r\n <button\r\n onclick=\"selectOption(${index})\"\r\n class=\"whitespace-nowrap px-4 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer ${\r\n state.selectedOptionIndex === index\r\n ? 'bg-indigo-100 text-indigo-800 border-2 border-indigo-500'\r\n : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-2 border-transparent'\r\n }\"\r\n >\r\n Option ${index + 1}\r\n <\/button>\r\n `).join('');\r\n }\r\n\r\n function renderAccordion() {\r\n const container = document.getElementById('accordionContainer');\r\n container.innerHTML = stepsConfig.map((step, index) => {\r\n const isActive = state.activeStep === index;\r\n const isCompleted = state.formData[step.id].trim() !== '';\r\n \r\n return `\r\n <div class=\"border-b border-slate-100 last:border-b-0 ${isActive ? 'bg-blue-50\/30' : 'hover:bg-slate-50'}\">\r\n <div \r\n class=\"p-5 flex items-center justify-between cursor-pointer\"\r\n onclick=\"toggleStep(${index})\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-full text-white font-bold text-sm ${\r\n isActive ? 'bg-blue-600' : isCompleted ? 'bg-slate-800' : 'bg-slate-300'\r\n }\">\r\n 0${index + 1}\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-lg font-semibold ${isActive ? 'text-blue-900' : 'text-slate-700'}\">\r\n ${step.title}\r\n <\/h3>\r\n <p class=\"text-sm text-slate-500 hidden md:block\">${step.description}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n ${isCompleted && !isActive ? '<span class=\"text-xs font-medium bg-green-100 text-green-700 px-2 py-1 rounded-full\">Added<\/span>' : ''}\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform ${isActive ? 'rotate-180' : ''}\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n ${isActive ? `\r\n <div class=\"p-5 pt-0 pl-16 md:pl-20\">\r\n <div class=\"flex items-start gap-2 mb-2\">\r\n <span class=\"text-xs bg-slate-200 text-slate-700 px-1.5 py-0.5 rounded cursor-help\" title=\"${step.helper}\">\u2139\ufe0f Help<\/span>\r\n <label class=\"text-sm font-medium text-slate-700 block\">Your Instruction<\/label>\r\n <\/div>\r\n <textarea\r\n id=\"textarea-${step.id}\"\r\n oninput=\"handleInputChange('${step.id}', this.value)\"\r\n placeholder=\"${step.placeholder}\"\r\n class=\"w-full min-h-[120px] p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-slate-700 outline-none\"\r\n >${state.formData[step.id]}<\/textarea>\r\n <div class=\"flex justify-end mt-3\">\r\n <button\r\n onclick=\"nextStep(${index})\"\r\n class=\"flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg cursor-pointer\"\r\n >\r\n ${index < stepsConfig.length - 1 ? 'Next Step' : 'Done'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }).join('');\r\n lucide.createIcons();\r\n }\r\n\r\n function toggleStep(index) {\r\n state.activeStep = state.activeStep === index ? -1 : index;\r\n renderAccordion();\r\n }\r\n\r\n function nextStep(currentIndex) {\r\n state.activeStep = currentIndex < stepsConfig.length - 1 ? currentIndex + 1 : -1;\r\n renderAccordion();\r\n }\r\n\r\n function handleInputChange(stepId, value) {\r\n state.formData[stepId] = value;\r\n state.isAiPolished = false;\r\n \r\n if (state.selectedOptionIndex >= 0 && state.generatedOptions[state.selectedOptionIndex]) {\r\n state.generatedOptions[state.selectedOptionIndex][stepId] = value;\r\n }\r\n \r\n recalculateFinalPrompt();\r\n updatePreviewUI();\r\n }\r\n\r\n function recalculateFinalPrompt() {\r\n if (!state.isAiPolished) {\r\n let promptParts = [];\r\n if (state.formData.role.trim()) promptParts.push(state.formData.role.trim());\r\n if (state.formData.reference.trim()) promptParts.push(state.formData.reference.trim());\r\n if (state.formData.task.trim()) promptParts.push(state.formData.task.trim());\r\n if (state.formData.constraints.trim()) promptParts.push(state.formData.constraints.trim());\r\n if (state.formData.output.trim()) promptParts.push(state.formData.output.trim());\r\n state.finalPrompt = promptParts.join('\\n\\n');\r\n }\r\n }\r\n\r\n function handleFinalPromptInput(val) {\r\n state.finalPrompt = val;\r\n state.isAiPolished = true;\r\n }\r\n\r\n function updatePreviewUI() {\r\n const box = document.getElementById('finalPromptBox');\r\n const emptyState = document.getElementById('emptyPromptState');\r\n if (box.value !== state.finalPrompt) {\r\n box.value = state.finalPrompt;\r\n }\r\n if (state.finalPrompt.trim()) {\r\n emptyState.classList.add('hidden');\r\n } else {\r\n emptyState.classList.remove('hidden');\r\n }\r\n }\r\n\r\n async function generateEnhancements() {\r\n const simplePrompt = document.getElementById('simplePrompt').value.trim();\r\n const errEl = document.getElementById('apiError');\r\n errEl.classList.add('hidden');\r\n \r\n if (!simplePrompt) return;\r\n\r\n const btn = document.getElementById('generateBtn');\r\n state.isGenerating = true;\r\n btn.disabled = true;\r\n btn.innerHTML = `<i data-lucide=\"loader-2\" class=\"w-4 h-4 animate-spin\"><\/i><span>Generating...<\/span>`;\r\n lucide.createIcons();\r\n\r\n try {\r\n const payload = {\r\n contents: [{\r\n role: \"user\",\r\n parts: [{ text: `Enhance the following simple prompt into ${state.numOptions} distinct, highly optimized variations using a 5-step framework: Role, Context\/Reference, Task, Constraints, and Output Format.\\n\\nIMPORTANT: For each option, in addition to the 5 individual fields, you MUST generate a 'polished_prompt'. This 'polished_prompt' should be a brilliantly written, highly logical, and natural-flowing final prompt ready to be copied and pasted directly into an LLM.\\n\\nSimple Prompt: \"${simplePrompt}\"` }]\r\n }],\r\n generationConfig: {\r\n responseMimeType: \"application\/json\",\r\n responseSchema: {\r\n type: \"ARRAY\",\r\n items: {\r\n type: \"OBJECT\",\r\n properties: {\r\n role: { type: \"STRING\" },\r\n reference: { type: \"STRING\" },\r\n task: { type: \"STRING\" },\r\n constraints: { type: \"STRING\" },\r\n output: { type: \"STRING\" },\r\n polished_prompt: { type: \"STRING\" }\r\n },\r\n required: [\"role\", \"reference\", \"task\", \"constraints\", \"output\", \"polished_prompt\"]\r\n }\r\n }\r\n }\r\n };\r\n\r\n const apiKey = \"AQ.Ab8RN6LiOF7U2mMwYPzNZVfa44CZGqNRGsH4Vi5Pyc80d9ATYg\";\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-3-flash-preview:generateContent?key=${apiKey}`;\r\n \r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n \r\n if (!response.ok) throw new Error(`API error: ${response.status}`);\r\n \r\n const data = await response.json();\r\n if (data.candidates && data.candidates.length > 0) {\r\n const jsonText = data.candidates[0].content.parts[0].text;\r\n const parsed = JSON.parse(jsonText);\r\n if (Array.isArray(parsed) && parsed.length > 0) {\r\n state.generatedOptions = parsed;\r\n selectOption(0);\r\n }\r\n } else {\r\n throw new Error(\"No candidates returned from API\");\r\n }\r\n } catch (err) {\r\n console.error(err);\r\n errEl.innerText = 'Failed to generate enhancements. Please try again.';\r\n errEl.classList.remove('hidden');\r\n } finally {\r\n state.isGenerating = false;\r\n btn.disabled = false;\r\n btn.innerHTML = `<i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i><span>Enhance with AI<\/span>`;\r\n lucide.createIcons();\r\n }\r\n }\r\n\r\n function selectOption(index) {\r\n state.selectedOptionIndex = index;\r\n const opt = state.generatedOptions[index];\r\n if (opt) {\r\n state.formData = {\r\n role: opt.role || '',\r\n reference: opt.reference || '',\r\n task: opt.task || '',\r\n constraints: opt.constraints || '',\r\n output: opt.output || ''\r\n };\r\n state.finalPrompt = opt.polished_prompt || '';\r\n state.isAiPolished = true;\r\n state.activeStep = 0;\r\n renderOptionsBar();\r\n renderAccordion();\r\n updatePreviewUI();\r\n }\r\n }\r\n\r\n function resetAll() {\r\n state.formData = { role: '', reference: '', task: '', constraints: '', output: '' };\r\n document.getElementById('simplePrompt').value = '';\r\n state.finalPrompt = '';\r\n state.isAiPolished = false;\r\n state.generatedOptions = [];\r\n state.selectedOptionIndex = -1;\r\n state.activeStep = 0;\r\n renderOptionsBar();\r\n renderAccordion();\r\n updatePreviewUI();\r\n }\r\n\r\n function copyPrompt() {\r\n if (!state.finalPrompt) return;\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = state.finalPrompt;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n const copyText = document.getElementById('copyText');\r\n const copyIcon = document.getElementById('copyIcon');\r\n copyText.innerText = \"Copied!\";\r\n copyIcon.setAttribute('data-lucide', 'check');\r\n lucide.createIcons();\r\n setTimeout(() => {\r\n copyText.innerText = \"Copy Prompt\";\r\n copyIcon.setAttribute('data-lucide', 'copy');\r\n lucide.createIcons();\r\n }, 2000);\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n document.body.removeChild(textArea);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Structured Prompt Builder Structured Prompt Builder Based on the 5-step framework (Role, Reference, Task, Constraints, Output) to generate highly effective AI prompts. AI Prompt Enhancer Describe what you want in simple terms Number of options to generate Enhance with AI Clear All Fields Generated Prompt Copy Prompt Start filling out the fields or use AI […]<\/p>\n","protected":false},"author":1,"featured_media":8086,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-21102","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"a3_pvc":{"activated":false,"total_views":0,"today_views":0},"_links":{"self":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/comments?post=21102"}],"version-history":[{"count":7,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102\/revisions"}],"predecessor-version":[{"id":21111,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102\/revisions\/21111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media\/8086"}],"wp:attachment":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media?parent=21102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Structured Prompt Builder<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Inter', sans-serif; }\r\n .scrollbar-hide::-webkit-scrollbar { display: none; }\r\n .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800\">\r\n <div id=\"app\" class=\"min-h-screen p-4 md:p-8\">\r\n <div class=\"max-w-6xl mx-auto\">\r\n \r\n <header class=\"mb-8 text-center md:text-left\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900 mb-2 tracking-tight\">\r\n Structured Prompt Builder\r\n <\/h1>\r\n <p class=\"text-slate-600 max-w-2xl\">\r\n Based on the 5-step framework (Role, Reference, Task, Constraints, Output) to generate highly effective AI prompts.\r\n <\/p>\r\n <\/header>\r\n\r\n <div class=\"flex flex-col lg:flex-row gap-8\">\r\n \r\n <div class=\"flex-1 space-y-6\">\r\n \r\n \r\n <div class=\"bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl shadow-sm border border-indigo-100 p-6\">\r\n <div class=\"flex items-center gap-2 mb-4\">\r\n <i data-lucide=\"sparkles\" class=\"w-5 h-5 text-indigo-600\"><\/i>\r\n <h2 class=\"text-lg font-bold text-indigo-950\">AI Prompt Enhancer<\/h2>\r\n <\/div>\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\r\n Describe what you want in simple terms\r\n <\/label>\r\n <textarea\r\n id=\"simplePrompt\"\r\n placeholder=\"e.g., Write a blog post about artificial intelligence for beginners...\"\r\n class=\"w-full min-h-[80px] p-3 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white text-slate-700 outline-none\"\r\n ><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-indigo-900 mb-2\">\r\n Number of options to generate\r\n <\/label>\r\n <div id=\"optionCountsContainer\" class=\"flex flex-wrap gap-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <button\r\n id=\"generateBtn\"\r\n onclick=\"generateEnhancements()\"\r\n class=\"flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium shadow-sm transition-all cursor-pointer\"\r\n >\r\n <i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i>\r\n <span>Enhance with AI<\/span>\r\n <\/button>\r\n <\/div>\r\n <p id=\"apiError\" class=\"text-sm text-red-500 mt-2 hidden\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"optionsBar\" class=\"bg-white p-2 rounded-xl shadow-sm border border-slate-200 flex overflow-x-auto gap-2 scrollbar-hide hidden\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\" id=\"accordionContainer\">\r\n \r\n <\/div>\r\n \r\n <div class=\"flex justify-end\">\r\n <button \r\n onclick=\"resetAll()\"\r\n class=\"flex items-center gap-2 text-sm text-slate-500 hover:text-red-600 py-2 px-4 rounded-lg hover:bg-red-50 cursor-pointer transition-colors\"\r\n >\r\n <i data-lucide=\"refresh-cw\" class=\"w-4 h-4\"><\/i>\r\n Clear All Fields\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:w-[450px] w-full flex flex-col h-[600px] lg:sticky lg:top-6\">\r\n <div class=\"bg-slate-900 rounded-2xl shadow-xl flex flex-col h-full overflow-hidden border border-slate-700\">\r\n <div class=\"bg-slate-800 p-4 border-b border-slate-700 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"flex gap-1.5\">\r\n <div class=\"w-3 h-3 rounded-full bg-red-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-green-500\/80\"><\/div>\r\n <\/div>\r\n <span class=\"text-slate-200 font-medium ml-2 text-sm\">Generated Prompt<\/span>\r\n <\/div>\r\n \r\n <button\r\n id=\"copyBtn\"\r\n onclick=\"copyPrompt()\"\r\n class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all bg-blue-600 hover:bg-blue-500 text-white cursor-pointer\"\r\n >\r\n <i data-lucide=\"copy\" class=\"w-4 h-4\" id=\"copyIcon\"><\/i>\r\n <span id=\"copyText\">Copy Prompt<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"flex-1 overflow-hidden flex flex-col bg-slate-900 relative\">\r\n <div id=\"emptyPromptState\" class=\"absolute inset-0 flex flex-col items-center justify-center text-slate-500 gap-4 opacity-50 p-6 pointer-events-none\">\r\n <i data-lucide=\"layout-list\" class=\"w-12 h-12\"><\/i>\r\n <p class=\"text-center text-sm\">Start filling out the fields or use AI Enhancer to see your prompt build here.<\/p>\r\n <\/div>\r\n <textarea\r\n id=\"finalPromptBox\"\r\n oninput=\"handleFinalPromptInput(this.value)\"\r\n class=\"flex-1 w-full h-full bg-slate-900 text-slate-300 font-mono text-sm leading-relaxed p-6 resize-none focus:outline-none z-10\"\r\n ><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-950 p-3 text-xs text-slate-500 text-center border-t border-slate-800\">\r\n Edit the text directly above to make final tweaks, then click Copy.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ State management\r\n let state = {\r\n activeStep: 0,\r\n numOptions: 3,\r\n isGenerating: false,\r\n generatedOptions: [],\r\n selectedOptionIndex: -1,\r\n apiError: '',\r\n formData: {\r\n role: '',\r\n reference: '',\r\n task: '',\r\n constraints: '',\r\n output: ''\r\n },\r\n finalPrompt: '',\r\n isAiPolished: false\r\n };\r\n\r\n const optionCounts = [1, 3, 5, 7, 9, 12, 20];\r\n\r\n const stepsConfig = [\r\n {\r\n id: 'role',\r\n title: 'Role',\r\n description: 'Define the role and objective required for the AI workflow.',\r\n placeholder: 'e.g., Act as a Senior Financial Analyst with 10 years of experience...',\r\n helper: 'Who is the AI? What expertise do they bring? Setting a persona helps tailor the response.'\r\n },\r\n {\r\n id: 'reference',\r\n title: 'Reference',\r\n description: 'Provide context, supporting information, and business requirements.',\r\n placeholder: 'e.g., We are analyzing Q3 earnings for leading cloud providers...',\r\n helper: 'What background information does the AI need? Provide context or data points.'\r\n },\r\n {\r\n id: 'task',\r\n title: 'Task',\r\n description: 'Clear instruction on what actions to take.',\r\n placeholder: 'e.g., Summarize key growth drivers and identify three potential risks...',\r\n helper: 'What exactly do you want the AI to do? Use clear action verbs.'\r\n },\r\n {\r\n id: 'constraints',\r\n title: 'Constraints',\r\n description: 'Establish limitations, formatting rules, Word count, tone.',\r\n placeholder: 'e.g., Keep the tone objective and professional. Do not exceed 500 words...',\r\n helper: 'What should the AI NOT do? Specify tone, length limits, or topics to avoid.'\r\n },\r\n {\r\n id: 'output',\r\n title: 'Output',\r\n description: 'Generate outputs as Bullet points, narrative paragraphs, or tables.',\r\n placeholder: 'e.g., Present findings in a markdown table comparing the companies...',\r\n helper: 'How should the final answer look? Specify formats like JSON, tables, or lists.'\r\n }\r\n ];\r\n\r\n \/\/ Initialize UI components on load\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderOptionCounts();\r\n renderAccordion();\r\n updatePreviewUI();\r\n lucide.createIcons();\r\n });\r\n\r\n function renderOptionCounts() {\r\n const container = document.getElementById('optionCountsContainer');\r\n container.innerHTML = optionCounts.map(count => `\r\n <button\r\n onclick=\"setNumOptions(${count})\"\r\n class=\"px-3 py-1 rounded-full text-sm font-medium transition-colors cursor-pointer ${\r\n state.numOptions === count \r\n ? 'bg-indigo-600 text-white shadow-sm' \r\n : 'bg-white text-indigo-700 hover:bg-indigo-100 border border-indigo-200'\r\n }\"\r\n >\r\n ${count}\r\n <\/button>\r\n `).join('');\r\n }\r\n\r\n function setNumOptions(count) {\r\n state.numOptions = count;\r\n renderOptionCounts();\r\n }\r\n\r\n function renderOptionsBar() {\r\n const bar = document.getElementById('optionsBar');\r\n if (state.generatedOptions.length === 0) {\r\n bar.classList.add('hidden');\r\n return;\r\n }\r\n bar.classList.remove('hidden');\r\n bar.innerHTML = state.generatedOptions.map((_, index) => `\r\n <button\r\n onclick=\"selectOption(${index})\"\r\n class=\"whitespace-nowrap px-4 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer ${\r\n state.selectedOptionIndex === index\r\n ? 'bg-indigo-100 text-indigo-800 border-2 border-indigo-500'\r\n : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-2 border-transparent'\r\n }\"\r\n >\r\n Option ${index + 1}\r\n <\/button>\r\n `).join('');\r\n }\r\n\r\n function renderAccordion() {\r\n const container = document.getElementById('accordionContainer');\r\n container.innerHTML = stepsConfig.map((step, index) => {\r\n const isActive = state.activeStep === index;\r\n const isCompleted = state.formData[step.id].trim() !== '';\r\n \r\n return `\r\n <div class=\"border-b border-slate-100 last:border-b-0 ${isActive ? 'bg-blue-50\/30' : 'hover:bg-slate-50'}\">\r\n <div \r\n class=\"p-5 flex items-center justify-between cursor-pointer\"\r\n onclick=\"toggleStep(${index})\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-full text-white font-bold text-sm ${\r\n isActive ? 'bg-blue-600' : isCompleted ? 'bg-slate-800' : 'bg-slate-300'\r\n }\">\r\n 0${index + 1}\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-lg font-semibold ${isActive ? 'text-blue-900' : 'text-slate-700'}\">\r\n ${step.title}\r\n <\/h3>\r\n <p class=\"text-sm text-slate-500 hidden md:block\">${step.description}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n ${isCompleted && !isActive ? '<span class=\"text-xs font-medium bg-green-100 text-green-700 px-2 py-1 rounded-full\">Added<\/span>' : ''}\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform ${isActive ? 'rotate-180' : ''}\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n ${isActive ? `\r\n <div class=\"p-5 pt-0 pl-16 md:pl-20\">\r\n <div class=\"flex items-start gap-2 mb-2\">\r\n <span class=\"text-xs bg-slate-200 text-slate-700 px-1.5 py-0.5 rounded cursor-help\" title=\"${step.helper}\">\u2139\ufe0f Help<\/span>\r\n <label class=\"text-sm font-medium text-slate-700 block\">Your Instruction<\/label>\r\n <\/div>\r\n <textarea\r\n id=\"textarea-${step.id}\"\r\n oninput=\"handleInputChange('${step.id}', this.value)\"\r\n placeholder=\"${step.placeholder}\"\r\n class=\"w-full min-h-[120px] p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-slate-700 outline-none\"\r\n >${state.formData[step.id]}<\/textarea>\r\n <div class=\"flex justify-end mt-3\">\r\n <button\r\n onclick=\"nextStep(${index})\"\r\n class=\"flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg cursor-pointer\"\r\n >\r\n ${index < stepsConfig.length - 1 ? 'Next Step' : 'Done'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }).join('');\r\n lucide.createIcons();\r\n }\r\n\r\n function toggleStep(index) {\r\n state.activeStep = state.activeStep === index ? -1 : index;\r\n renderAccordion();\r\n }\r\n\r\n function nextStep(currentIndex) {\r\n state.activeStep = currentIndex < stepsConfig.length - 1 ? currentIndex + 1 : -1;\r\n renderAccordion();\r\n }\r\n\r\n function handleInputChange(stepId, value) {\r\n state.formData[stepId] = value;\r\n state.isAiPolished = false;\r\n \r\n if (state.selectedOptionIndex >= 0 && state.generatedOptions[state.selectedOptionIndex]) {\r\n state.generatedOptions[state.selectedOptionIndex][stepId] = value;\r\n }\r\n \r\n recalculateFinalPrompt();\r\n updatePreviewUI();\r\n }\r\n\r\n function recalculateFinalPrompt() {\r\n if (!state.isAiPolished) {\r\n let promptParts = [];\r\n if (state.formData.role.trim()) promptParts.push(state.formData.role.trim());\r\n if (state.formData.reference.trim()) promptParts.push(state.formData.reference.trim());\r\n if (state.formData.task.trim()) promptParts.push(state.formData.task.trim());\r\n if (state.formData.constraints.trim()) promptParts.push(state.formData.constraints.trim());\r\n if (state.formData.output.trim()) promptParts.push(state.formData.output.trim());\r\n state.finalPrompt = promptParts.join('\\n\\n');\r\n }\r\n }\r\n\r\n function handleFinalPromptInput(val) {\r\n state.finalPrompt = val;\r\n state.isAiPolished = true;\r\n }\r\n\r\n function updatePreviewUI() {\r\n const box = document.getElementById('finalPromptBox');\r\n const emptyState = document.getElementById('emptyPromptState');\r\n if (box.value !== state.finalPrompt) {\r\n box.value = state.finalPrompt;\r\n }\r\n if (state.finalPrompt.trim()) {\r\n emptyState.classList.add('hidden');\r\n } else {\r\n emptyState.classList.remove('hidden');\r\n }\r\n }\r\n\r\n async function generateEnhancements() {\r\n const simplePrompt = document.getElementById('simplePrompt').value.trim();\r\n const errEl = document.getElementById('apiError');\r\n errEl.classList.add('hidden');\r\n \r\n if (!simplePrompt) return;\r\n\r\n const btn = document.getElementById('generateBtn');\r\n state.isGenerating = true;\r\n btn.disabled = true;\r\n btn.innerHTML = `<i data-lucide=\"loader-2\" class=\"w-4 h-4 animate-spin\"><\/i><span>Generating...<\/span>`;\r\n lucide.createIcons();\r\n\r\n try {\r\n const payload = {\r\n contents: [{\r\n role: \"user\",\r\n parts: [{ text: `Enhance the following simple prompt into ${state.numOptions} distinct, highly optimized variations using a 5-step framework: Role, Context\/Reference, Task, Constraints, and Output Format.\\n\\nIMPORTANT: For each option, in addition to the 5 individual fields, you MUST generate a 'polished_prompt'. This 'polished_prompt' should be a brilliantly written, highly logical, and natural-flowing final prompt ready to be copied and pasted directly into an LLM.\\n\\nSimple Prompt: \"${simplePrompt}\"` }]\r\n }],\r\n generationConfig: {\r\n responseMimeType: \"application\/json\",\r\n responseSchema: {\r\n type: \"ARRAY\",\r\n items: {\r\n type: \"OBJECT\",\r\n properties: {\r\n role: { type: \"STRING\" },\r\n reference: { type: \"STRING\" },\r\n task: { type: \"STRING\" },\r\n constraints: { type: \"STRING\" },\r\n output: { type: \"STRING\" },\r\n polished_prompt: { type: \"STRING\" }\r\n },\r\n required: [\"role\", \"reference\", \"task\", \"constraints\", \"output\", \"polished_prompt\"]\r\n }\r\n }\r\n }\r\n };\r\n\r\n const apiKey = \"AQ.Ab8RN6LiOF7U2mMwYPzNZVfa44CZGqNRGsH4Vi5Pyc80d9ATYg\";\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-3-flash-preview:generateContent?key=${apiKey}`;\r\n \r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n \r\n if (!response.ok) throw new Error(`API error: ${response.status}`);\r\n \r\n const data = await response.json();\r\n if (data.candidates && data.candidates.length > 0) {\r\n const jsonText = data.candidates[0].content.parts[0].text;\r\n const parsed = JSON.parse(jsonText);\r\n if (Array.isArray(parsed) && parsed.length > 0) {\r\n state.generatedOptions = parsed;\r\n selectOption(0);\r\n }\r\n } else {\r\n throw new Error(\"No candidates returned from API\");\r\n }\r\n } catch (err) {\r\n console.error(err);\r\n errEl.innerText = 'Failed to generate enhancements. Please try again.';\r\n errEl.classList.remove('hidden');\r\n } finally {\r\n state.isGenerating = false;\r\n btn.disabled = false;\r\n btn.innerHTML = `<i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i><span>Enhance with AI<\/span>`;\r\n lucide.createIcons();\r\n }\r\n }\r\n\r\n function selectOption(index) {\r\n state.selectedOptionIndex = index;\r\n const opt = state.generatedOptions[index];\r\n if (opt) {\r\n state.formData = {\r\n role: opt.role || '',\r\n reference: opt.reference || '',\r\n task: opt.task || '',\r\n constraints: opt.constraints || '',\r\n output: opt.output || ''\r\n };\r\n state.finalPrompt = opt.polished_prompt || '';\r\n state.isAiPolished = true;\r\n state.activeStep = 0;\r\n renderOptionsBar();\r\n renderAccordion();\r\n updatePreviewUI();\r\n }\r\n }\r\n\r\n function resetAll() {\r\n state.formData = { role: '', reference: '', task: '', constraints: '', output: '' };\r\n document.getElementById('simplePrompt').value = '';\r\n state.finalPrompt = '';\r\n state.isAiPolished = false;\r\n state.generatedOptions = [];\r\n state.selectedOptionIndex = -1;\r\n state.activeStep = 0;\r\n renderOptionsBar();\r\n renderAccordion();\r\n updatePreviewUI();\r\n }\r\n\r\n function copyPrompt() {\r\n if (!state.finalPrompt) return;\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = state.finalPrompt;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n const copyText = document.getElementById('copyText');\r\n const copyIcon = document.getElementById('copyIcon');\r\n copyText.innerText = \"Copied!\";\r\n copyIcon.setAttribute('data-lucide', 'check');\r\n lucide.createIcons();\r\n setTimeout(() => {\r\n copyText.innerText = \"Copy Prompt\";\r\n copyIcon.setAttribute('data-lucide', 'copy');\r\n lucide.createIcons();\r\n }, 2000);\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n document.body.removeChild(textArea);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Structured Prompt Builder Structured Prompt Builder Based on the 5-step framework (Role, Reference, Task, Constraints, Output) to generate highly effective AI prompts. AI Prompt Enhancer Describe what you want in simple terms Number of options to generate Enhance with AI Clear All Fields Generated Prompt Copy Prompt Start filling out the fields or use AI […]<\/p>\n","protected":false},"author":1,"featured_media":8086,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-21102","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"a3_pvc":{"activated":false,"total_views":0,"today_views":0},"_links":{"self":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/comments?post=21102"}],"version-history":[{"count":7,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102\/revisions"}],"predecessor-version":[{"id":21111,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21102\/revisions\/21111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media\/8086"}],"wp:attachment":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media?parent=21102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}