Prompt: Act as a web designer. Create for me a simple website using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Simple Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ===== GLOBAL STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f4f6f9;
color: #333;
}
/* ===== HEADER ===== */
header {
background: #1e3a8a;
color: white;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 24px;
}
nav a {
color: white;
text-decoration: none;
margin-left: 20px;
font-weight: bold;
}
nav a:hover {
color: #93c5fd;
}
/* ===== HERO SECTION ===== */
.hero {
background: linear-gradient(to right, #2563eb, #1e40af);
color: white;
padding: 80px 20px;
text-align: center;
}
.hero h2 {
font-size: 40px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.hero button {
padding: 12px 25px;
border: none;
background: white;
color: #1e3a8a;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
.hero button:hover {
background: #e0e7ff;
}
/* ===== CONTENT SECTION ===== */
.container {
max-width: 1100px;
margin: 60px auto;
padding: 0 20px;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-bottom: 15px;
color: #1e3a8a;
}
/* ===== FOOTER ===== */
footer {
background: #111827;
color: white;
text-align: center;
padding: 20px;
margin-top: 60px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
header {
flex-direction: column;
text-align: center;
}
nav {
margin-top: 10px;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<h1>MyWebsite</h1>
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<!-- HERO -->
<section class="hero">
<h2>Welcome to My Website</h2>
<p>This is a clean and simple modern website layout using HTML and CSS.</p>
<button>Get Started</button>
</section>
<!-- CONTENT -->
<section class="container">
<div class="cards">
<div class="card">
<h3>Design</h3>
<p>Clean and modern design principles with responsive layout.</p>
</div>
<div class="card">
<h3>Development</h3>
<p>Structured HTML and scalable CSS for easy customization.</p>
</div>
<div class="card">
<h3>Performance</h3>
<p>Lightweight and fast loading for better user experience.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<p>© 2026 MyWebsite | All Rights Reserved</p>
</footer>
</body>
</html>
Prompt: Act as a web designer. Please show me the code to for a programming help site. On the left side would be a vertical menu with clicks for programs like "Java," "C++," "Cobol," etc. When those are clicked, in the middle of the screen will pop up a menu window showing the prompt wording for that function. On the right side of the screen (in a display window) will show the results of the prompt.
Output Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Programming Help — 3-Pane Prompt Builder</title>
<style>
:root{
--bg:#0b1220;
--panel:#0f1b33;
--panel2:#0c162b;
--border:rgba(255,255,255,.10);
--text:rgba(255,255,255,.92);
--muted:rgba(255,255,255,.65);
--accent:#7c5cff;
--accent2:#20c997;
--danger:#ff6b6b;
--shadow: 0 12px 30px rgba(0,0,0,.35);
--radius: 14px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family:var(--sans);
background: radial-gradient(1100px 700px at 10% 0%, rgba(124,92,255,.25), transparent 60%),
radial-gradient(900px 600px at 90% 10%, rgba(32,201,151,.18), transparent 55%),
var(--bg);
color:var(--text);
}
/* Header */
header{
height:60px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
border-bottom:1px solid var(--border);
background: rgba(11,18,32,.65);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 10;
}
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
letter-spacing:.2px;
}
.badge{
font-family:var(--mono);
font-size:12px;
color:rgba(255,255,255,.85);
border:1px solid var(--border);
padding:4px 8px;
border-radius:999px;
background:rgba(255,255,255,.04);
}
.actions{
display:flex;
gap:10px;
align-items:center;
}
.btn{
border:1px solid var(--border);
background:rgba(255,255,255,.04);
color:var(--text);
padding:8px 10px;
border-radius:10px;
cursor:pointer;
font-size:14px;
transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
border-color:rgba(124,92,255,.55);
background: linear-gradient(180deg, rgba(124,92,255,.28), rgba(124,92,255,.14));
}
.btn.danger{
border-color:rgba(255,107,107,.45);
background: linear-gradient(180deg, rgba(255,107,107,.22), rgba(255,107,107,.10));
}
/* App shell */
.shell{
height: calc(100% - 60px);
display:grid;
grid-template-columns: 260px 1fr 1.25fr;
gap:12px;
padding:12px;
}
.panel{
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
border:1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow:hidden;
min-height: 0; /* allow internal scrolling */
}
.panel .panel-head{
padding:12px 12px 10px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background: rgba(0,0,0,.08);
}
.panel-title{
display:flex;
flex-direction:column;
gap:3px;
}
.panel-title strong{ font-size:14px; }
.panel-title span{ font-size:12px; color:var(--muted); }
/* Left nav */
.nav{
display:flex;
flex-direction:column;
height:100%;
}
.search{
margin:10px 12px 0;
border:1px solid var(--border);
border-radius: 12px;
overflow:hidden;
display:flex;
align-items:center;
background: rgba(255,255,255,.03);
}
.search input{
width:100%;
padding:10px 12px;
border:0;
outline:0;
background:transparent;
color:var(--text);
font-size:14px;
}
.lang-list{
padding:10px 8px 12px;
overflow:auto;
flex:1;
}
.lang{
width:100%;
display:flex;
align-items:center;
gap:10px;
padding:10px 10px;
border-radius: 12px;
cursor:pointer;
border:1px solid transparent;
background: transparent;
color: var(--text);
text-align:left;
font-size:14px;
transition: background .15s ease, border-color .15s ease;
}
.lang:hover{
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.10);
}
.lang.active{
background: rgba(124,92,255,.14);
border-color: rgba(124,92,255,.35);
}
.dot{
width:10px;height:10px;border-radius:50%;
background: rgba(255,255,255,.35);
box-shadow: 0 0 0 3px rgba(255,255,255,.05);
flex:0 0 auto;
}
.lang.active .dot{
background: var(--accent);
box-shadow: 0 0 0 3px rgba(124,92,255,.20);
}
.lang small{
margin-left:auto;
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
/* Center prompt builder */
.prompt-body{
padding:12px;
overflow:auto;
height: calc(100% - 54px);
}
.row{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:10px;
}
label{
font-size:12px;
color:var(--muted);
}
select, textarea, input[type="text"]{
width:100%;
border:1px solid var(--border);
background: rgba(255,255,255,.03);
color: var(--text);
padding:10px;
border-radius: 12px;
outline: none;
font-size:14px;
font-family: var(--sans);
}
textarea{
min-height:120px;
resize: vertical;
font-family: var(--mono);
line-height:1.35;
}
.hint{
font-size:12px;
color:var(--muted);
margin-top:-2px;
}
.chips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:4px;
}
.chip{
border:1px solid var(--border);
background: rgba(255,255,255,.03);
padding:7px 10px;
border-radius:999px;
cursor:pointer;
font-size:13px;
user-select:none;
}
.chip.active{
border-color: rgba(32,201,151,.45);
background: rgba(32,201,151,.12);
}
.prompt-preview{
border:1px dashed rgba(255,255,255,.22);
background: rgba(0,0,0,.10);
border-radius: 12px;
padding:10px;
font-family: var(--mono);
font-size: 13px;
white-space: pre-wrap;
line-height:1.35;
color: rgba(255,255,255,.88);
}
.inline-actions{
display:flex;
gap:10px;
margin-top:10px;
flex-wrap:wrap;
}
/* Right output */
.output-body{
padding:12px;
overflow:auto;
height: calc(100% - 54px);
}
.tabs{
display:flex;
gap:8px;
}
.tab{
border:1px solid var(--border);
background: rgba(255,255,255,.03);
padding:7px 10px;
border-radius:999px;
cursor:pointer;
font-size:13px;
color: var(--muted);
}
.tab.active{
color: var(--text);
border-color: rgba(124,92,255,.45);
background: rgba(124,92,255,.12);
}
.card{
border:1px solid var(--border);
background: rgba(255,255,255,.03);
border-radius: 12px;
padding:12px;
margin-top:12px;
}
.card h3{
margin:0 0 8px;
font-size:14px;
}
.card p{
margin:0 0 10px;
color: rgba(255,255,255,.85);
line-height:1.5;
font-size:14px;
}
pre{
margin:0;
padding:12px;
background: rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.10);
border-radius: 12px;
overflow:auto;
font-family: var(--mono);
font-size: 13px;
line-height:1.35;
color: rgba(255,255,255,.92);
}
.muted{
color: var(--muted);
font-size: 13px;
}
/* Modal prompt window */
.modal-backdrop{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:16px;
background: rgba(0,0,0,.55);
z-index: 50;
}
.modal{
width:min(760px, 100%);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.16);
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0,0,0,.55);
overflow:hidden;
}
.modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:14px 14px 10px;
border-bottom:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.10);
}
.modal-head strong{ font-size:14px; }
.modal-head .muted{ font-size:12px; margin-top:2px; }
.modal-body{
padding:14px;
display:grid;
gap:12px;
}
.modal-foot{
padding:12px 14px 14px;
border-top:1px solid rgba(255,255,255,.12);
display:flex;
gap:10px;
justify-content:flex-end;
flex-wrap:wrap;
background: rgba(0,0,0,.08);
}
.kbd{
font-family: var(--mono);
font-size:12px;
border:1px solid rgba(255,255,255,.18);
padding:2px 6px;
border-radius:8px;
background: rgba(255,255,255,.04);
}
/* Responsive */
@media (max-width: 1100px){
.shell{
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr 1fr;
}
#panelOutput{ grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px){
.shell{
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
#panelNav{ grid-row:1; }
#panelPrompt{ grid-row:2; }
#panelOutput{ grid-row:3; }
header{ position:static; }
}
</style>
</head>
<body>
<header>
<div class="brand">
<span style="display:inline-flex;width:28px;height:28px;border-radius:10px;background:rgba(124,92,255,.25);border:1px solid rgba(124,92,255,.35);align-items:center;justify-content:center;font-family:var(--mono);">?</span>
<div>
<div>Programming Help</div>
<div class="muted" style="margin-top:2px">Languages → Prompt Window → Results</div>
</div>
</div>
<div class="actions">
<span class="badge" id="activeLangBadge">Language: Java</span>
<button class="btn" id="openModalBtn" title="Open prompt window (Ctrl+K)">Prompt Window <span class="kbd">Ctrl</span>+<span class="kbd">K</span></button>
<button class="btn danger" id="clearBtn">Clear</button>
</div>
</header>
<main class="shell">
<!-- LEFT: NAV -->
<section class="panel nav" id="panelNav">
<div class="panel-head">
<div class="panel-title">
<strong>Languages</strong>
<span>Click a language</span>
</div>
</div>
<div class="search" aria-label="Search languages">
<input id="langSearch" type="text" placeholder="Search… (e.g., Java, C++)" />
</div>
<div class="lang-list" id="langList" role="navigation" aria-label="Language menu">
<!-- populated by JS -->
</div>
</section>
<!-- CENTER: PROMPT BUILDER -->
<section class="panel" id="panelPrompt">
<div class="panel-head">
<div class="panel-title">
<strong>Prompt Builder</strong>
<span>Pick a template, fill inputs, run</span>
</div>
<button class="btn primary" id="runBtn">Run Prompt</button>
</div>
<div class="prompt-body">
<div class="row">
<div class="field">
<label for="templateSelect">Template</label>
<select id="templateSelect"></select>
<div class="hint">Templates change per language.</div>
</div>
<div class="field">
<label for="toneSelect">Tone</label>
<select id="toneSelect">
<option value="concise">Concise</option>
<option value="balanced" selected>Balanced</option>
<option value="deep">Deep / Detailed</option>
</select>
<div class="hint">Controls explanation style.</div>
</div>
</div>
<div class="field">
<label>Constraints</label>
<div class="chips" id="constraintChips">
<div class="chip" data-key="readability">Prioritize readability</div>
<div class="chip" data-key="performance">Prioritize performance</div>
<div class="chip" data-key="noNewLibs">No new libraries</div>
<div class="chip" data-key="keepBehavior">Keep behavior identical</div>
<div class="chip" data-key="addTests">Add unit tests</div>
</div>
</div>
<div class="field">
<label for="codeInput">Code (optional)</label>
<textarea id="codeInput" placeholder="// Paste code here…"></textarea>
</div>
<div class="field">
<label for="errorInput">Error message / goal (optional)</label>
<textarea id="errorInput" placeholder="Paste error text or describe what you want…"></textarea>
</div>
<div class="field">
<label>Prompt preview (editable)</label>
<textarea id="promptText" style="min-height:150px;"></textarea>
<div class="inline-actions">
<button class="btn" id="copyPromptBtn">Copy Prompt</button>
<button class="btn" id="resetPromptBtn">Reset Prompt</button>
</div>
</div>
<div class="field">
<label>Live preview</label>
<div class="prompt-preview" id="promptPreview"></div>
</div>
</div>
</section>
<!-- RIGHT: OUTPUT -->
<section class="panel" id="panelOutput">
<div class="panel-head">
<div class="panel-title">
<strong>Results</strong>
<span>Rendered output appears here</span>
</div>
<div class="tabs" role="tablist" aria-label="Output tabs">
<div class="tab active" data-tab="answer" role="tab">Answer</div>
<div class="tab" data-tab="code" role="tab">Code</div>
<div class="tab" data-tab="notes" role="tab">Notes</div>
</div>
</div>
<div class="output-body">
<div class="muted" id="statusLine">Ready. Select a language, choose a template, then Run Prompt.</div>
<div class="card" id="answerCard">
<h3>Answer</h3>
<p id="answerText">No results yet.</p>
</div>
<div class="card" id="codeCard" style="display:none;">
<h3>Code</h3>
<pre id="codeBlock">// Output code will appear here.</pre>
</div>
<div class="card" id="notesCard" style="display:none;">
<h3>Notes</h3>
<p class="muted" id="notesText">Tips, edge cases, and next steps will show here.</p>
</div>
<div class="inline-actions">
<button class="btn" id="copyAnswerBtn">Copy Answer</button>
<button class="btn" id="copyCodeBtn">Copy Code</button>
<button class="btn" id="regenBtn">Regenerate</button>
</div>
</div>
</section>
</main>
<!-- MODAL: “menu window showing the prompt wording” -->
<div class="modal-backdrop" id="modalBackdrop" aria-hidden="true">
<div class="modal" role="dialog" aria-modal="true" aria-label="Prompt Window">
<div class="modal-head">
<div>
<strong id="modalTitle">Prompt Window</strong>
<div class="muted" id="modalSubtitle">Template wording for the selected language</div>
</div>
<button class="btn" id="closeModalBtn" aria-label="Close">Close</button>
</div>
<div class="modal-body">
<div class="field">
<label>Prompt wording</label>
<div class="prompt-preview" id="modalPromptWording"></div>
<div class="muted">Tip: edit the prompt in the center panel before running.</div>
</div>
</div>
<div class="modal-foot">
<button class="btn" id="modalCopyBtn">Copy wording</button>
<button class="btn primary" id="modalRunBtn">Run Prompt</button>
</div>
</div>
</div>
<script>
// --- Data: languages + templates (simple example set) ---
const LANGS = [
{ name: "Java", key: "java", templates: [
{ id:"explain-error", label:"Explain an error", wording:
`You are a senior Java developer.
Explain the following error clearly, list the most likely causes, and show how to fix it.
If code is provided, point to the exact lines and propose a corrected version.` },
{ id:"refactor", label:"Refactor for readability", wording:
`You are a senior Java developer.
Refactor the following code for readability and maintainability.
Keep the behavior identical and explain the changes briefly.` },
{ id:"tests", label:"Generate unit tests", wording:
`You are a senior Java developer.
Create unit tests for the following code using JUnit.
Include edge cases and explain how to run the tests.` },
]},
{ name: "C++", key: "cpp", templates: [
{ id:"explain-error", label:"Explain a compiler/runtime error", wording:
`You are a senior C++ engineer.
Explain the error, identify the root cause, and provide a corrected version.
Prefer modern C++ (C++17/20) where appropriate.` },
{ id:"optimize", label:"Optimize performance", wording:
`You are a senior C++ performance engineer.
Optimize the following code for speed and memory without changing behavior.
Explain the tradeoffs and include a benchmark idea.` },
{ id:"modernize", label:"Modernize legacy code", wording:
`You are a senior C++ engineer.
Modernize the following legacy C++ code (RAII, smart pointers, STL).
Keep the external behavior identical.` },
]},
{ name: "COBOL", key: "cobol", templates: [
{ id:"explain", label:"Explain COBOL paragraph/section", wording:
`You are an experienced COBOL developer.
Explain what this COBOL code does in plain language.
Highlight important divisions/sections and any potential bugs.` },
{ id:"convert", label:"Convert to pseudocode", wording:
`You are an experienced COBOL developer.
Convert the following COBOL code into clear pseudocode.
Preserve business rules and data transformations.` },
{ id:"debug", label:"Debug data / file issues", wording:
`You are an experienced COBOL developer.
Help diagnose the issue based on this code and error/output symptoms.
Provide step-by-step checks for files, records, and common COBOL pitfalls.` },
]},
{ name: "Python", key: "python", templates: [
{ id:"refactor", label:"Refactor + type hints", wording:
`You are a senior Python developer.
Refactor the code with clear structure and add type hints.
Keep behavior identical and explain the changes.` },
{ id:"debug", label:"Debug this exception", wording:
`You are a senior Python developer.
Explain the exception and fix the code.
Also show a minimal reproducible example if possible.` },
]},
{ name: "JavaScript", key: "js", templates: [
{ id:"fix", label:"Fix bug + explain", wording:
`You are a senior JavaScript developer.
Fix the bug in the following code and explain why it was happening.
Prefer modern JS and safe patterns.` },
{ id:"react", label:"Build a React component", wording:
`You are a senior front-end engineer.
Build a React component that meets the described behavior.
Include accessibility and brief usage instructions.` },
]},
];
// --- State ---
let activeLangKey = "java";
let activeTemplateId = null;
let constraints = new Set();
let lastRunPayload = null;
// --- Elements ---
const langListEl = document.getElementById("langList");
const langSearchEl = document.getElementById("langSearch");
const templateSelectEl = document.getElementById("templateSelect");
const toneSelectEl = document.getElementById("toneSelect");
const codeInputEl = document.getElementById("codeInput");
const errorInputEl = document.getElementById("errorInput");
const promptTextEl = document.getElementById("promptText");
const promptPreviewEl = document.getElementById("promptPreview");
const statusLineEl = document.getElementById("statusLine");
const activeLangBadgeEl = document.getElementById("activeLangBadge");
const runBtn = document.getElementById("runBtn");
const clearBtn = document.getElementById("clearBtn");
const regenBtn = document.getElementById("regenBtn");
const copyPromptBtn = document.getElementById("copyPromptBtn");
const resetPromptBtn = document.getElementById("resetPromptBtn");
const answerTextEl = document.getElementById("answerText");
const codeBlockEl = document.getElementById("codeBlock");
const notesTextEl = document.getElementById("notesText");
const copyAnswerBtn = document.getElementById("copyAnswerBtn");
const copyCodeBtn = document.getElementById("copyCodeBtn");
const tabs = Array.from(document.querySelectorAll(".tab"));
const answerCard = document.getElementById("answerCard");
const codeCard = document.getElementById("codeCard");
const notesCard = document.getElementById("notesCard");
// Modal
const modalBackdrop = document.getElementById("modalBackdrop");
const openModalBtn = document.getElementById("openModalBtn");
const closeModalBtn = document.getElementById("closeModalBtn");
const modalPromptWording = document.getElementById("modalPromptWording");
const modalCopyBtn = document.getElementById("modalCopyBtn");
const modalRunBtn = document.getElementById("modalRunBtn");
const modalTitle = document.getElementById("modalTitle");
const modalSubtitle = document.getElementById("modalSubtitle");
// Chips
const chipEls = Array.from(document.querySelectorAll(".chip"));
// --- Helpers ---
function getActiveLang(){
return LANGS.find(l => l.key === activeLangKey) || LANGS[0];
}
function getActiveTemplate(){
const lang = getActiveLang();
return lang.templates.find(t => t.id === activeTemplateId) || lang.templates[0];
}
function escapeHtml(str){
return str.replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
}
async function copyToClipboard(text){
try{
await navigator.clipboard.writeText(text);
toast("Copied to clipboard.");
}catch{
toast("Copy failed. Your browser may block clipboard access.");
}
}
let toastTimer = null;
function toast(msg){
clearTimeout(toastTimer);
statusLineEl.textContent = msg;
toastTimer = setTimeout(() => {
statusLineEl.textContent = lastRunPayload ? "Last run ready. You can Regenerate." :
"Ready. Select a language, choose a template, then Run Prompt.";
}, 1800);
}
// Build a final prompt from template + inputs
function buildPrompt(){
const lang = getActiveLang();
const template = getActiveTemplate();
const tone = toneSelectEl.value;
const constraintText = constraints.size
? `\nConstraints:\n- ${Array.from(constraints).map(k => ({
readability:"Prioritize readability",
performance:"Prioritize performance",
noNewLibs:"No new libraries",
keepBehavior:"Keep behavior identical",
addTests:"Add unit tests"
}[k] || k)).join("\n- ")}\n`
: "";
const code = codeInputEl.value.trim();
const err = errorInputEl.value.trim();
const toneLine = tone === "concise"
? "\nTone: concise, direct, minimal fluff."
: tone === "deep"
? "\nTone: detailed, include reasoning and edge cases."
: "\nTone: balanced, clear explanations.";
const parts = [
`Language: ${lang.name}`,
template.wording,
toneLine,
constraintText,
err ? `\nProblem / Goal:\n${err}\n` : "",
code ? `\nCode:\n${code}\n` : ""
].filter(Boolean);
return parts.join("\n");
}
function syncPromptFromTemplate(){
const template = getActiveTemplate();
const base = buildPrompt();
promptTextEl.value = base;
promptPreviewEl.textContent = base;
// modal wording should show just the template wording (per your spec)
modalPromptWording.textContent = template.wording;
modalTitle.textContent = `Prompt Window — ${getActiveLang().name}`;
modalSubtitle.textContent = `Template: ${template.label}`;
}
function syncPreviewFromTextarea(){
promptPreviewEl.textContent = promptTextEl.value;
}
// --- UI Builders ---
function renderLanguageList(filter=""){
const q = filter.trim().toLowerCase();
langListEl.innerHTML = "";
LANGS
.filter(l => !q || l.name.toLowerCase().includes(q))
.forEach(l => {
const btn = document.createElement("button");
btn.className = "lang" + (l.key === activeLangKey ? " active" : "");
btn.type = "button";
btn.innerHTML = `<span class="dot"></span><span>${escapeHtml(l.name)}</span><small>${l.templates.length}</small>`;
btn.addEventListener("click", () => setActiveLanguage(l.key));
langListEl.appendChild(btn);
});
}
function renderTemplateSelect(){
const lang = getActiveLang();
templateSelectEl.innerHTML = "";
lang.templates.forEach(t => {
const opt = document.createElement("option");
opt.value = t.id;
opt.textContent = t.label;
templateSelectEl.appendChild(opt);
});
// set default
activeTemplateId = lang.templates[0]?.id || null;
templateSelectEl.value = activeTemplateId;
}
function setActiveLanguage(langKey){
activeLangKey = langKey;
activeLangBadgeEl.textContent = `Language: ${getActiveLang().name}`;
renderLanguageList(langSearchEl.value);
renderTemplateSelect();
syncPromptFromTemplate();
// show modal prompt wording as soon as language changes (your “pop up menu window”)
openModal();
}
function setActiveTemplate(templateId){
activeTemplateId = templateId;
syncPromptFromTemplate();
}
// --- Tabs ---
function setTab(tab){
tabs.forEach(t => t.classList.toggle("active", t.dataset.tab === tab));
answerCard.style.display = (tab === "answer") ? "" : "none";
codeCard.style.display = (tab === "code") ? "" : "none";
notesCard.style.display = (tab === "notes") ? "" : "none";
}
// --- Modal ---
function openModal(){
modalBackdrop.style.display = "flex";
modalBackdrop.setAttribute("aria-hidden", "false");
}
function closeModal(){
modalBackdrop.style.display = "none";
modalBackdrop.setAttribute("aria-hidden", "true");
}
// --- “Run prompt” simulation (replace with your backend call) ---
function simulateLLMResponse(prompt){
// This is just demo output. In production, you'd POST prompt to your server.
const lang = getActiveLang().name;
const template = getActiveTemplate().label;
const answer =
`✅ Received your prompt.
Language: ${lang}
Template: ${template}
Here’s how I would respond:
1) I’d identify the likely root cause based on the error/goal.
2) I’d propose a fix with an explanation.
3) I’d suggest improvements and edge-case checks.
(Connect this to a real API to generate live results.)`;
const codeOut =
`// Example output (placeholder)
// Replace this with real code returned from your AI / backend.
function exampleFix() {
return "Your corrected code would appear here.";
}`;
const notes =
`Next steps:
- Add a backend endpoint (e.g., /api/run) to send {language, template, prompt, code, constraints}.
- Stream results to the right panel for a nicer UX.
- Add “History” + saved prompts per language.`;
return { answer, codeOut, notes };
}
function runPrompt(){
const prompt = promptTextEl.value.trim();
if(!prompt){
toast("Prompt is empty.");
return;
}
lastRunPayload = {
language: activeLangKey,
template: activeTemplateId,
prompt
};
statusLineEl.textContent = "Running prompt… (demo)";
const { answer, codeOut, notes } = simulateLLMResponse(prompt);
answerTextEl.textContent = answer;
codeBlockEl.textContent = codeOut;
notesTextEl.textContent = notes;
// default to Answer tab
setTab("answer");
toast("Done. Results updated.");
}
function clearAll(){
constraints.clear();
chipEls.forEach(c => c.classList.remove("active"));
codeInputEl.value = "";
errorInputEl.value = "";
syncPromptFromTemplate();
answerTextEl.textContent = "No results yet.";
codeBlockEl.textContent = "// Output code will appear here.";
notesTextEl.textContent = "Tips, edge cases, and next steps will show here.";
lastRunPayload = null;
toast("Cleared.");
}
// --- Events ---
langSearchEl.addEventListener("input", (e) => renderLanguageList(e.target.value));
templateSelectEl.addEventListener("change", (e) => setActiveTemplate(e.target.value));
toneSelectEl.addEventListener("change", syncPromptFromTemplate);
codeInputEl.addEventListener("input", syncPromptFromTemplate);
errorInputEl.addEventListener("input", syncPromptFromTemplate);
promptTextEl.addEventListener("input", syncPreviewFromTextarea);
chipEls.forEach(chip => {
chip.addEventListener("click", () => {
const key = chip.dataset.key;
if(constraints.has(key)){
constraints.delete(key);
chip.classList.remove("active");
}else{
constraints.add(key);
chip.classList.add("active");
}
syncPromptFromTemplate();
});
});
runBtn.addEventListener("click", runPrompt);
regenBtn.addEventListener("click", () => {
if(!lastRunPayload){ toast("Nothing to regenerate yet."); return; }
runPrompt();
});
clearBtn.addEventListener("click", clearAll);
copyPromptBtn.addEventListener("click", () => copyToClipboard(promptTextEl.value));
resetPromptBtn.addEventListener("click", syncPromptFromTemplate);
copyAnswerBtn.addEventListener("click", () => copyToClipboard(answerTextEl.textContent));
copyCodeBtn.addEventListener("click", () => copyToClipboard(codeBlockEl.textContent));
tabs.forEach(t => t.addEventListener("click", () => setTab(t.dataset.tab)));
// Modal events
openModalBtn.addEventListener("click", openModal);
closeModalBtn.addEventListener("click", closeModal);
modalBackdrop.addEventListener("click", (e) => {
if(e.target === modalBackdrop) closeModal();
});
modalCopyBtn.addEventListener("click", () => copyToClipboard(modalPromptWording.textContent));
modalRunBtn.addEventListener("click", () => { closeModal(); runPrompt(); });
// Keyboard: Ctrl+K opens prompt window, Esc closes
document.addEventListener("keydown", (e) => {
if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k"){
e.preventDefault();
openModal();
}
if(e.key === "Escape"){
closeModal();
}
});
// --- Init ---
renderLanguageList();
renderTemplateSelect();
syncPromptFromTemplate();
setTab("answer");
</script>
</body>
</html>
Results:
​
​
​