HTML playground for a 'Bug Report' prompt

I have generated the standalone Bug Report Playground. It includes a reactive state manager that maps your Priority, Environment, and Steps inputs into a formatted Markdown block for easy copying.

Bug Report Playground Generator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bug Report Prompt Playground</title>
    <style>
        body { font-family: system-ui, sans-serif; padding: 2rem; background: #f4f4f9; color: #333; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .control-group { margin-bottom: 1.5rem; }
        label { display: block; font-weight: bold; margin-bottom: 0.5rem; }
        select, textarea { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
        textarea { height: 100px; }
        .preview-box { background: #282c34; color: #abb2bf; padding: 1.5rem; border-radius: 4px; position: relative; white-space: pre-wrap; font-family: monospace; }
        .copy-btn { margin-top: 1rem; padding: 0.75rem 1.5rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .copy-btn:active { background: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Bug Report Generator</h1>
        <div class="control-group">
            <label>Priority</label>
            <select id="priority">
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
            </select>
        </div>
        <div class="control-group">
            <label>Environment</label>
            <select id="env">
                <option value="Development">Development</option>
                <option value="Staging">Staging</option>
                <option value="Production">Production</option>
            </select>
        </div>
        <div class="control-group">
            <label>Steps to Reproduce</label>
            <textarea id="steps" placeholder="1. Open app..."></textarea>
        </div>
        <h3>Generated Prompt</h3>
        <div class="preview-box" id="preview"></div>
        <button class="copy-btn" onclick="copyToClipboard()">Copy to Clipboard</button>
    </div>

    <script>
        const fields = ['priority', 'env', 'steps'];
        const preview = document.getElementById('preview');

        function update() {
            const data = {};
            fields.forEach(f => data[f] = document.getElementById(f).value);
            const output = `### Bug Report\n**Priority:** ${data.priority}\n**Env:** ${data.env}\n\n**Steps:**\n${data.steps || 'No steps provided.'}`;
            preview.textContent = output;
        }

        function copyToClipboard() {
            navigator.clipboard.writeText(preview.textContent).then(() => {
                const btn = document.querySelector('.copy-btn');
                const oldText = btn.textContent;
                btn.textContent = 'Copied!';
                setTimeout(() => btn.textContent = oldText, 2000);
            });
        }

        fields.forEach(f => document.getElementById(f).addEventListener('input', update));
        update();
    </script>
</body>
</html>

Next steps

1. Save the code above as bug-report-tool.html.
2. Open the file in any web browser to start generating bug reports.
3. Share the file directly with your QA team; no hosting is required.