zerosonesfun · July 1, 2025 08:08
diff --git a/prompt-generator.html b/prompt-generator.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Universal Prompt Builder</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #f8f8f8;
      padding: 2rem;
      color: #333;
      line-height: 1.6;
    }
    h1 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    label {
      font-weight: bold;
      margin-top: 1rem;
      display: block;
    }
    select, textarea, input {
      width: 100%;
      padding: 0.6rem;
      font-size: 1rem;
      margin-top: 0.25rem;
      margin-bottom: 1rem;
    }
    button {
      padding: 0.6rem 1rem;
      background-color: #007bff;
      border: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    #prompt-output {
      background: #fff;
      padding: 1rem;
      border: 1px solid #ccc;
      margin-top: 1rem;
      white-space: pre-wrap;
    }
    .visually-hidden {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
  </style>
 </head>
 <body>
  <main>
    <h1>🧠 Prompt Builder</h1>

    <label for="task">1. What should the prompt do?</label>
    <textarea id="task" rows="2" aria-describedby="task-help" placeholder="e.g. Write a haiku about mindfulness."></textarea>
    <div id="task-help" class="visually-hidden">Describe what you want the AI to do.</div>

    <label for="intent">2. Why do you want it?</label>
    <textarea id="intent" rows="2" placeholder="e.g. For a social media post about calm living."></textarea>

    <label for="vibe">3. Choose a vibe (tone)</label>
    <select id="vibe">
      <option value="">-- Select a tone --</option>
      <option value="professional, respectful, and clear">📊 Professional</option>
      <option value="light, fun, and creative">🎨 Playful</option>
      <option value="calm, minimal, and poetic">🌊 Minimalist</option>
      <option value="sarcastic, edgy, and ironic">🦇 Sarcastic</option>
      <option value="uplifting, kind, and human-centered">✨ Uplifting</option>
      <option value="deep, reflective, and philosophical">🧠 Thoughtful</option>
    </select>

    <label for="domain">4. Choose an industry mode</label>
    <select id="domain">
      <option value="">-- Select a domain --</option>
      <option value="for a marketing expert">Marketing</option>
      <option value="for an educator or school context">Education</option>
      <option value="for a software developer or tech user">Technology</option>
      <option value="for a lawyer or legal audience">Legal</option>
      <option value="for a healthcare provider">Healthcare</option>
    </select>

    <label for="format">5. Desired format</label>
    <input id="format" type="text" placeholder="e.g. Bullet points, HTML, email body" />

    <label for="audience">6. Who is it for?</label>
    <input id="audience" type="text" placeholder="e.g. Kids, indie devs, lawyers" />

    <label for="extras">7. Special instructions (optional)</label>
    <textarea id="extras" rows="2" placeholder="e.g. Use nature metaphors, avoid buzzwords..."></textarea>

    <button id="generate">Generate Prompt</button>
    <button id="save" style="margin-left: 1rem;">Save Prompt</button>

    <div id="prompt-output" role="region" aria-live="polite"></div>
  </main>

  <script>
    const generateBtn = document.getElementById("generate");
    const saveBtn = document.getElementById("save");

    generateBtn.addEventListener("click", () => {
      const task = document.getElementById("task").value.trim();
      const intent = document.getElementById("intent").value.trim();
      const tone = document.getElementById("vibe").value;
      const domain = document.getElementById("domain").value;
      const format = document.getElementById("format").value.trim();
      const audience = document.getElementById("audience").value.trim();
      const extras = document.getElementById("extras").value.trim();

      const prompt = `Create ${task || "[something]"} in a ${tone || "neutral"} tone ${domain ? domain + "," : ""} formatted as ${format || "text"}, for ${audience || "a general audience"}. The goal is ${intent || "to communicate effectively"}.${extras ? " " + extras : ""}`;

      document.getElementById("prompt-output").textContent = prompt;

      navigator.clipboard.writeText(prompt).then(() => {
        generateBtn.textContent = "Copied!";
        setTimeout(() => generateBtn.textContent = "Generate Prompt", 2000);
      });
    });

    saveBtn.addEventListener("click", () => {
      const savedPrompts = JSON.parse(localStorage.getItem("savedPrompts") || "[]");
      const newPrompt = document.getElementById("prompt-output").textContent;
      if (newPrompt) {
        savedPrompts.push({ text: newPrompt, date: new Date().toISOString() });
        localStorage.setItem("savedPrompts", JSON.stringify(savedPrompts));
        saveBtn.textContent = "Saved!";
        setTimeout(() => saveBtn.textContent = "Save Prompt", 2000);
      }
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Universal Prompt Builder</title>
	<style>
	body {
	font-family: system-ui, sans-serif;
	background: #f8f8f8;
	padding: 2rem;
	color: #333;
	line-height: 1.6;
	}
	h1 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
	}
	label {
	font-weight: bold;
	margin-top: 1rem;
	display: block;
	}
	select, textarea, input {
	width: 100%;
	padding: 0.6rem;
	font-size: 1rem;
	margin-top: 0.25rem;
	margin-bottom: 1rem;
	}
	button {
	padding: 0.6rem 1rem;
	background-color: #007bff;
	border: none;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	}
	button:hover {
	background-color: #0056b3;
	}
	#prompt-output {
	background: #fff;
	padding: 1rem;
	border: 1px solid #ccc;
	margin-top: 1rem;
	white-space: pre-wrap;
	}
	.visually-hidden {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<main>
	<h1>🧠 Prompt Builder</h1>

	<label for="task">1. What should the prompt do?</label>
	<textarea id="task" rows="2" aria-describedby="task-help" placeholder="e.g. Write a haiku about mindfulness."></textarea>
	<div id="task-help" class="visually-hidden">Describe what you want the AI to do.</div>

	<label for="intent">2. Why do you want it?</label>
	<textarea id="intent" rows="2" placeholder="e.g. For a social media post about calm living."></textarea>

	<label for="vibe">3. Choose a vibe (tone)</label>
	<select id="vibe">
	<option value="">-- Select a tone --</option>
	<option value="professional, respectful, and clear">📊 Professional</option>
	<option value="light, fun, and creative">🎨 Playful</option>
	<option value="calm, minimal, and poetic">🌊 Minimalist</option>
	<option value="sarcastic, edgy, and ironic">🦇 Sarcastic</option>
	<option value="uplifting, kind, and human-centered">✨ Uplifting</option>
	<option value="deep, reflective, and philosophical">🧠 Thoughtful</option>
	</select>

	<label for="domain">4. Choose an industry mode</label>
	<select id="domain">
	<option value="">-- Select a domain --</option>
	<option value="for a marketing expert">Marketing</option>
	<option value="for an educator or school context">Education</option>
	<option value="for a software developer or tech user">Technology</option>
	<option value="for a lawyer or legal audience">Legal</option>
	<option value="for a healthcare provider">Healthcare</option>
	</select>

	<label for="format">5. Desired format</label>
	<input id="format" type="text" placeholder="e.g. Bullet points, HTML, email body" />

	<label for="audience">6. Who is it for?</label>
	<input id="audience" type="text" placeholder="e.g. Kids, indie devs, lawyers" />

	<label for="extras">7. Special instructions (optional)</label>
	<textarea id="extras" rows="2" placeholder="e.g. Use nature metaphors, avoid buzzwords..."></textarea>

	<button id="generate">Generate Prompt</button>
	<button id="save" style="margin-left: 1rem;">Save Prompt</button>

	<div id="prompt-output" role="region" aria-live="polite"></div>
	</main>

	<script>
	const generateBtn = document.getElementById("generate");
	const saveBtn = document.getElementById("save");

	generateBtn.addEventListener("click", () => {
	const task = document.getElementById("task").value.trim();
	const intent = document.getElementById("intent").value.trim();
	const tone = document.getElementById("vibe").value;
	const domain = document.getElementById("domain").value;
	const format = document.getElementById("format").value.trim();
	const audience = document.getElementById("audience").value.trim();
	const extras = document.getElementById("extras").value.trim();

	const prompt = `Create ${task \|\| "[something]"} in a ${tone \|\| "neutral"} tone ${domain ? domain + "," : ""} formatted as ${format \|\| "text"}, for ${audience \|\| "a general audience"}. The goal is ${intent \|\| "to communicate effectively"}.${extras ? " " + extras : ""}`;

	document.getElementById("prompt-output").textContent = prompt;

	navigator.clipboard.writeText(prompt).then(() => {
	generateBtn.textContent = "Copied!";
	setTimeout(() => generateBtn.textContent = "Generate Prompt", 2000);
	});
	});

	saveBtn.addEventListener("click", () => {
	const savedPrompts = JSON.parse(localStorage.getItem("savedPrompts") \|\| "[]");
	const newPrompt = document.getElementById("prompt-output").textContent;
	if (newPrompt) {
	savedPrompts.push({ text: newPrompt, date: new Date().toISOString() });
	localStorage.setItem("savedPrompts", JSON.stringify(savedPrompts));
	saveBtn.textContent = "Saved!";
	setTimeout(() => saveBtn.textContent = "Save Prompt", 2000);
	}
	});
	</script>
	</body>
	</html>