Update index.html

index.html

@@ -6,36 +6,34 @@
   <title>coachproai • CourseMaster Prompt Builder</title>
   <style>
     :root{
-      --primary-color-start:#4F46E5;  /* indigo */
-      --primary-color-end:#8B5CF6;    /* violet */
+      --primary-color-start:#4F46E5;
+      --primary-color-end:#8B5CF6;
       --background-color:#f8f9fc;
       --container-bg:#ffffff;
-      --text-color:#1f2937;   /* gray-800 */
-      --label-color:#374151;  /* gray-700 */
-      --border-color:#d1d5db; /* gray-300 */
+      --text-color:#1f2937;
+      --label-color:#374151;
+      --border-color:#d1d5db;
       --shadow-color:rgba(0,0,0,0.08);
     }
-
     *{box-sizing:border-box}
-    html,body{height:100%}
     body{
       margin:0;
-      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
+      font-family:system-ui,sans-serif;
       background:var(--background-color);
       color:var(--text-color);
-      padding:20px;
+      padding:24px;
       display:flex;
-      align-items:flex-start;
       justify-content:center;
+      font-size:1.05rem; /* bigger base font */
+      line-height:1.5;
     }
-
     .app{
       width:100%;
-      max-width:450px;
+      max-width:600px; /* wider */
       background:var(--container-bg);
-      padding:30px;
-      border-radius:15px;
-      box-shadow:0 4px 15px var(--shadow-color);
+      padding:36px;
+      border-radius:18px;
+      box-shadow:0 6px 20px var(--shadow-color);
       position:relative;
       border:1px solid var(--border-color);
     }
@@ -43,15 +41,14 @@
       content:"";
       position:absolute;
       inset:-2px -2px auto -2px;
-      height:6px;
-      border-top-left-radius:16px;
-      border-top-right-radius:16px;
+      height:8px;
+      border-top-left-radius:20px;
+      border-top-right-radius:20px;
       background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
     }
-
     h1{
-      margin:0 0 16px 0;
-      font-size:2em; /* ~2em */
+      margin:0 0 20px;
+      font-size:2.3em;
       background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
       -webkit-background-clip:text;
       background-clip:text;
@@ -59,128 +56,44 @@
       font-weight:800;
       text-align:center;
     }
-    .subtitle{
-      text-align:center;
-      color:#6b7280;
-      font-size:.9rem;
-      margin-bottom:18px;
-    }
-
-    .label{
-      color:var(--label-color);
-      font-weight:600;
-      margin-bottom:6px;
-      display:block;
-    }
-
+    .subtitle{text-align:center;color:#6b7280;font-size:1rem;margin-bottom:22px}
+    .label{color:var(--label-color);font-weight:600;margin-bottom:8px;display:block;font-size:1rem}
     .input, select, textarea{
-      width:100%;
-      padding:12px 12px;
-      border:1px solid var(--border-color);
-      border-radius:10px;
-      background:#fff;
-      color:var(--text-color);
-      transition:box-shadow .15s ease, border-color .15s ease;
+      width:100%;padding:14px;border:1px solid var(--border-color);border-radius:12px;
+      background:#fff;color:var(--text-color);font-size:1rem;
     }
-    .input:focus, select:focus, textarea:focus{
-      outline:none;
-      border-color:var(--primary-color-start);
+    .input:focus,select:focus,textarea:focus{
+      outline:none;border-color:var(--primary-color-start);
       box-shadow:0 0 0 4px rgba(79,70,229,.15);
     }
-
-    .group{margin-bottom:18px}
-
-    .toggles{
-      display:flex;
-      flex-wrap:wrap;
-      gap:8px;
-    }
+    .group{margin-bottom:22px}
+    .toggles{display:flex;flex-wrap:wrap;gap:10px}
     .toggle{
-      border:1px solid var(--border-color);
-      background:#f9fafb;
-      color:var(--text-color);
-      padding:8px 12px;
-      border-radius:10px;
-      cursor:pointer;
-      transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
-      font-weight:600;
-    }
-    .toggle:focus{
-      outline:none;
-      box-shadow:0 0 0 4px rgba(79,70,229,.15);
+      border:1px solid var(--border-color);background:#f9fafb;color:var(--text-color);
+      padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;font-size:1rem;
     }
-    .toggle[aria-pressed="true"],
-    .toggle.selected{
-      color:#fff;
-      border-color:transparent;
+    .toggle[aria-pressed="true"]{
+      color:#fff;border-color:transparent;
       background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
     }
-    .toggle:active{transform:translateY(1px)}
-
-    .textarea{resize:vertical}
-
+    .out{
+      background:#f9fafb;border:1px dashed var(--border-color);padding:16px;
+      border-radius:14px;min-height:130px;white-space:pre-wrap;font-size:1rem;
+    }
+    .cta-row{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
     .btn{
-      display:inline-flex;
-      align-items:center;
-      justify-content:center;
-      gap:8px;
-      font-weight:700; /* bold 1.1–1.5em */
-      font-size:1.05rem;
-      border:none;
-      color:#fff;
-      padding:12px 16px;
-      border-radius:12px;
+      flex:1;display:inline-flex;align-items:center;justify-content:center;
+      font-weight:700;font-size:1.1rem;border:none;color:#fff;padding:14px 18px;
+      border-radius:14px;cursor:pointer;
       background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
-      cursor:pointer;
-      transition:filter .15s ease, transform .05s ease, box-shadow .15s ease;
     }
-    .btn:hover{filter:brightness(0.98)}
-    .btn:active{transform:translateY(1px)}
-    .btn:focus{
-      outline:none;
-      box-shadow:0 0 0 4px rgba(79,70,229,.15);
-    }
-    .btn.secondary{
-      background:#f3f4f6;
-      color:#111827;
-      border:1px solid var(--border-color);
-    }
-
     .btn.hidden{display:none}
-
-    .out{
-      background:#f9fafb;
-      border:1px dashed var(--border-color);
-      padding:14px;
-      border-radius:12px;
-      min-height:110px;
-      white-space:pre-wrap;
-    }
-
-    .cta-row{
-      margin-top:12px;
-      display:flex;
-      gap:10px;
-      flex-wrap:wrap;
-    }
-
-    .hint{
-      margin-top:8px;
-      color:#6b7280;
-      font-size:.9rem;
-      min-height:1.2em;
-    }
-
-    .footer{
-      margin-top:18px;
-      text-align:center;
-      color:#9ca3af;
-      font-size:.8rem;
-    }
-
-    @media (max-width:420px){
-      body{padding:14px}
-      .app{padding:22px}
+    .hint{margin-top:10px;color:#6b7280;font-size:1rem;min-height:1.4em}
+    .footer{text-align:center;color:#9ca3af;font-size:.9rem;margin-top:22px}
+    @media (max-width:480px){
+      body{padding:16px;font-size:1rem}
+      .app{padding:24px;border-radius:14px}
+      h1{font-size:1.8em}
       .btn{width:100%}
       .cta-row{flex-direction:column}
     }
@@ -189,15 +102,13 @@
 <body>
   <main class="app" role="application" aria-labelledby="title">
     <h1 id="title">CourseMaster Prompt Builder</h1>
-    <p class="subtitle" aria-hidden="true">Powered by <strong>coachproai</strong> • Build, copy, and paste into your GPT</p>
+    <p class="subtitle">Powered by <strong>coachproai</strong></p>
 
-    <!-- Short input -->
     <section class="top-input">
       <label class="label" for="topic">Topic</label>
-      <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" autocomplete="off" />
+      <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" />
     </section>
 
-    <!-- Options -->
     <section class="options" aria-label="Options">
       <div class="group" role="group" aria-label="Audience">
         <span class="label">Audience</span>
@@ -254,177 +165,93 @@
         </div>
       </div>
 
-      <div class="group cols-3" aria-label="Meta">
+      <div class="group">
         <label for="duration" class="label">Duration</label>
         <input id="duration" class="input" type="text" placeholder="e.g., 8 weeks" />
-
         <label for="localization" class="label">Localization</label>
         <select id="localization" class="input">
-          <option>Auto</option>
-          <option>Pakistan</option>
-          <option>GCC</option>
-          <option>Global</option>
+          <option>Auto</option><option>Pakistan</option><option>GCC</option><option>Global</option>
         </select>
-
         <label for="export" class="label">Export</label>
         <select id="export" class="input">
-          <option>PDF</option>
-          <option>DOCX</option>
-          <option>HTML</option>
+          <option>PDF</option><option>DOCX</option><option>HTML</option>
         </select>
       </div>
 
       <div class="group" role="group" aria-label="Add-ons">
         <span class="label">Add-ons</span>
         <div class="toggles multi" data-name="addons">
-          <button class="toggle" type="button" aria-pressed="false" data-key="video">Include Video Support</button>
-          <button class="toggle" type="button" aria-pressed="false" data-key="bloom">Bloom Mapping</button>
-          <button class="toggle" type="button" aria-pressed="false" data-key="assess">Assessments</button>
+          <button class="toggle" type="button" aria-pressed="false">Include Video Support</button>
+          <button class="toggle" type="button" aria-pressed="false">Bloom Mapping</button>
+          <button class="toggle" type="button" aria-pressed="false">Assessments</button>
         </div>
       </div>
     </section>
 
-    <!-- Long textarea + primary action -->
     <section class="notes">
       <label class="label" for="notes">Notes</label>
-      <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc. (Tip: Press Ctrl/Cmd+Enter to Build)"></textarea>
-      <button id="build" class="btn start" type="button" aria-label="Build Prompt">Build Prompt</button>
+      <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea>
     </section>
 
-    <!-- Response / Preview -->
     <section class="response">
       <span class="label">Prompt Preview</span>
       <pre id="out" class="out" role="status" aria-live="polite"></pre>
       <div class="cta-row">
-        <button id="copy" class="btn cta hidden" type="button" aria-label="Copy Prompt">Generate Prompt</button>
-        <button id="copyOpen" class="btn cta hidden" type="button" aria-label="Copy and Open in GPT">Copy &amp; Paste Now</button>
+        <button id="copy" class="btn cta hidden" type="button">Generate Prompt</button>
+        <button id="copyOpen" class="btn cta hidden" type="button">Copy &amp; Paste Now</button>
       </div>
-      <div class="hint" id="hint" aria-live="polite" aria-atomic="true"></div>
+      <div class="hint" id="hint" aria-live="polite"></div>
     </section>
 
-    <div class="footer" aria-hidden="true">© coachproai</div>
+    <div class="footer">© coachproai</div>
   </main>
 
   <script>
-    // ===== PurpleUI Prompt Builder (English-only code) =====
-    const GPT_URL = 'https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';
-
-    const $ = (sel, root=document) => root.querySelector(sel);
-    const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
-
-    // Toggle buttons (single vs multi)
-    $$(".toggles").forEach(group => {
-      group.addEventListener("click", e => {
-        if (!e.target.classList.contains("toggle")) return;
-        const btn = e.target;
-        const isMulti = group.classList.contains("multi");
-        if (!isMulti){
-          $$(".toggle", group).forEach(b => b.setAttribute("aria-pressed","false"));
-        }
-        btn.setAttribute("aria-pressed", btn.getAttribute("aria-pressed")==="true" ? "false" : "true");
-      });
-      // Keyboard support: Space/Enter toggles
-      group.addEventListener("keydown", e => {
-        if (!e.target.classList.contains("toggle")) return;
-        if (e.key === " " || e.key === "Enter"){
-          e.preventDefault();
-          e.target.click();
+    const GPT_URL='https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';
+    const $=s=>document.querySelector(s);
+    const $$=s=>Array.from(document.querySelectorAll(s));
+    $$(".toggles").forEach(g=>{
+      g.addEventListener("click",e=>{
+        if(!e.target.classList.contains("toggle"))return;
+        if(!g.classList.contains("multi")){
+          $$(".toggle",g).forEach(b=>b.setAttribute("aria-pressed","false"));
         }
+        e.target.setAttribute("aria-pressed", e.target.getAttribute("aria-pressed")==="true"?"false":"true");
+        buildPrompt();
       });
     });
-
-    // Assemble prompt text
     function buildPrompt(){
-      const topic = $("#topic").value.trim();
-      const duration = $("#duration").value.trim();
-      const notes = $("#notes").value.trim();
-
-      let prompt = `Create a course plan for "${topic || "<<<Add Topic>>>" }".`;
-
-      $$(".toggles").forEach(group => {
-        const name = group.dataset.name;
-        const selected = $$(".toggle[aria-pressed='true']", group).map(b => b.textContent.trim());
-        if (selected.length > 0) prompt += `\n- ${name}: ${selected.join(", ")}`;
+      const topic=$("#topic").value.trim();
+      const duration=$("#duration").value.trim();
+      const notes=$("#notes").value.trim();
+      let p=`Create a course plan for "${topic||"<<<Add Topic>>>"}".`;
+      $$(".toggles").forEach(g=>{
+        const name=g.dataset.name;
+        const sel=$$(".toggle[aria-pressed='true']",g).map(b=>b.textContent.trim());
+        if(sel.length>0)p+=`\n- ${name}: ${sel.join(", ")}`;
       });
-
-      if (duration) prompt += `\n- Duration: ${duration}`;
-      const loc = $("#localization").value;
-      if (loc && loc !== "Auto") prompt += `\n- Localization: ${loc}`;
-      const exp = $("#export").value;
-      if (exp) prompt += `\n- Export Format: ${exp}`;
-      if (notes) prompt += `\n- Notes: ${notes}`;
-
-      $("#out").textContent = prompt;
+      if(duration)p+=`\n- Duration: ${duration}`;
+      const loc=$("#localization").value;if(loc!=="Auto")p+=`\n- Localization: ${loc}`;
+      const exp=$("#export").value;if(exp)p+=`\n- Export Format: ${exp}`;
+      if(notes)p+=`\n- Notes: ${notes}`;
+      $("#out").textContent=p;
       $("#copy").classList.remove("hidden");
       $("#copyOpen").classList.remove("hidden");
-      $("#hint").textContent = "Prompt ready!";
+      $("#hint").textContent="Prompt ready!";
     }
-
-    // Primary action
-    $("#build").addEventListener("click", buildPrompt);
-
-    // Enter-to-start: when in short inputs, Enter triggers build; in textarea use Ctrl/Cmd+Enter
-    ["#topic","#duration"].forEach(sel=>{
-      $(sel).addEventListener("keydown", e=>{
-        if(e.key==="Enter"){ e.preventDefault(); buildPrompt(); }
-      });
+    ["#topic","#duration","#notes"].forEach(s=>{
+      $(s).addEventListener("input",buildPrompt);
     });
-    $("#notes").addEventListener("keydown", e=>{
-      if ((e.ctrlKey || e.metaKey) && e.key === "Enter"){ e.preventDefault(); buildPrompt(); }
+    $("#copy").addEventListener("click",async()=>{
+      const t=$("#out").textContent;
+      await navigator.clipboard.writeText(t);
+      $("#hint").textContent="Copied!";
     });
-
-    // Copy helpers with feedback + fallback
-    async function copyText(text){
-      try{
-        await navigator.clipboard.writeText(text);
-        return true;
-      }catch{
-        // Fallback
-        const ta=document.createElement("textarea");
-        ta.value=text;
-        document.body.appendChild(ta);
-        ta.select();
-        try{ document.execCommand("copy"); }catch{}
-        document.body.removeChild(ta);
-        return true;
-      }
-    }
-
-    // CTA: Copy Prompt (Generate Prompt)
-    $("#copy").addEventListener("click", async () => {
-      const prompt = $("#out").textContent;
-      if (!prompt.trim()){ $("#hint").textContent = "Nothing to copy yet."; return; }
-      await copyText(prompt);
-      $("#hint").textContent = "Copied!";
-      const btn = $("#copy");
-      const prev = btn.textContent;
-      btn.textContent = "Copied!";
-      setTimeout(()=>btn.textContent=prev, 1200);
-    });
-
-    // CTA: Copy & Open in GPT
-    $("#copyOpen").addEventListener("click", async () => {
-      const prompt = $("#out").textContent;
-      if (!prompt.trim()){ $("#hint").textContent = "Build a prompt first."; return; }
-      await copyText(prompt);
-      const url = `${GPT_URL}?q=${encodeURIComponent(prompt)}`;
-      const win = window.open(url, "_blank");
-      const btn = $("#copyOpen");
-      const prev = btn.textContent;
-      if (win){ btn.textContent = "Copied! • Opening GPT…"; }
-      else { btn.textContent = "Copied! • Please allow pop-ups"; }
-      setTimeout(()=>btn.textContent=prev, 1800);
+    $("#copyOpen").addEventListener("click",async()=>{
+      const t=$("#out").textContent;
+      await navigator.clipboard.writeText(t);
+      window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`,"_blank");
     });
-
-    // Accessibility: announce when buttons become visible after first build
-    const outObserver = new MutationObserver(()=> {
-      $("#copy").setAttribute("aria-hidden", $("#copy").classList.contains("hidden") ? "true":"false");
-      $("#copyOpen").setAttribute("aria-hidden", $("#copyOpen").classList.contains("hidden") ? "true":"false");
-    });
-    outObserver.observe($("#out"), {childList:true, subtree:true});
-
-    // Focus first field on load for quick typing
-    window.addEventListener("DOMContentLoaded", ()=> $("#topic").focus());
   </script>
 </body>
 </html>