New text el
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>PromptBuilderPro™</title>
<style>
body { font-family: Arial, sans-serif; max-width: 900px; margin: 24px auto; padding: 0 16px; }
textarea { width: 100%; min-height: 120px; padding: 12px; font-size: 16px; }
pre { width: 100%; white-space: pre-wrap; word-wrap: break-word; padding: 12px; border: 1px solid #ccc; border-radius: 8px; background: #fafafa; }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
button { padding: 10px 14px; font-size: 16px; cursor: pointer; }
.hint { color: #444; font-size: 14px; margin-top: 8px; }
</style>
</head>
<body>
<h1>PromptBuilderPro™</h1>
<p class="hint">Type what you want. Click Generate. Copy the prompt into ChatGPT (or any AI).</p>
<label for="input"><strong>Your request</strong></label>
<textarea id="input" placeholder="Example: monkey in circus juggling balls"></textarea>
<div class="row">
<button id="generate">Generate Prompt</button>
<button id="copy" disabled>Copy Prompt</button>
<button id="clear">Clear</button>
</div>
<h2>Generated prompt</h2>
<pre id="output"></pre>
<script>
// 1) The locked master template lives here (static text)
const MASTER_TEMPLATE =
`Act as a highly capable AI assistant with expert-level proficiency in this task. Produce a complete, high-quality result based strictly on the user request below.
USER REQUEST:
{USER_INPUT}
RESPONSE REQUIREMENTS:
- Deliver a finished, directly usable output that fulfills the request.
- If the request is brief or underspecified, intelligently add reasonable defaults (tone, structure, scope, length, format) that improve usefulness without changing the core intent.
- Use clear structure when appropriate (headings, sections, formatting) unless the request explicitly demands a single paragraph.
- Avoid generic filler, vague advice, repetition, or template-y phrasing. Be specific and high-signal.
- Do not ask follow-up questions. Do not show your reasoning. Do not include disclaimers or meta-commentary.
- Output only the final result.`;
const inputEl = document.getElementById('input');
const outputEl = document.getElementById('output');
const genBtn = document.getElementById('generate');
const copyBtn = document.getElementById('copy');
const clearBtn = document.getElementById('clear');
// 2) Basic safety: prevent accidental placeholder injection / keep formatting clean
function sanitizeUserInput(text) {
// Trim and collapse excessive whitespace while keeping newlines
return text.trim().replace(/\r\n/g, '\n');
}
// 3) “Generation” = string replacement
function buildPrompt(userInput) {
const clean = sanitizeUserInput(userInput);
if (!clean) return '';
return MASTER_TEMPLATE.replace('{USER_INPUT}', clean);
}
genBtn.addEventListener('click', () => {
const prompt = buildPrompt(inputEl.value);
outputEl.textContent = prompt || '';
copyBtn.disabled = !prompt;
});
copyBtn.addEventListener('click', async () => {
const text = outputEl.textContent;
if (!text) return;
try {
await navigator.clipboard.writeText(text);
copyBtn.textContent = 'Copied!';
setTimeout(() => copyBtn.textContent = 'Copy Prompt', 900);
} catch (e) {
alert('Copy failed. Please select the text and copy manually.');
}
});
clearBtn.addEventListener('click', () => {
inputEl.value = '';
outputEl.textContent = '';
copyBtn.disabled = true;
});
</script>
</body>
</html>