Spaces:

Nuzwa
/

_Course_Master_Pro_

Running

App Files Files Community

Nuzwa commited on Oct 2, 2025

Commit

e181506

verified ·

1 Parent(s): de79c8a

Update index.html

Browse files

Files changed (1) hide show

index.html +417 -270

index.html CHANGED Viewed

@@ -1,294 +1,441 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>coachproai • CourseMaster Pro</title>
-  <style>
-    :root{
-      --primary-color-start:#4F46E5;
-      --primary-color-end:#8B5CF6;
-      --background-color:#f8f9fc;
-      --container-bg:#ffffff;
-      --text-color:#1f2937;
-      --label-color:#374151;
-      --border-color:#d1d5db;
-      --shadow-color:rgba(0,0,0,0.08);
-    }
-    *{box-sizing:border-box}
-    body{
-      margin:0;
-      font-family:system-ui,sans-serif;
-      background:var(--background-color);
-      color:var(--text-color);
-      padding:24px;
-      display:flex;
-      justify-content:center;
-      font-size:1.05rem;
-      line-height:1.5;
-    }
-    .app{
-      width:100%;
-      max-width:600px;
-      background:var(--container-bg);
-      padding:36px;
-      border-radius:18px;
-      box-shadow:0 6px 20px var(--shadow-color);
-      position:relative;
-      border:1px solid var(--border-color);
-    }
-    .app::before{
-      content:"";
-      position:absolute;
-      inset:-2px -2px auto -2px;
-      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 20px;
-      font-size:2.3em;
-      background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
-      -webkit-background-clip:text;
-      background-clip:text;
-      color:transparent;
-      font-weight:800;
-      text-align:center;
-    }
-    .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:14px;border:1px solid var(--border-color);border-radius:12px;
-      background:#fff;color:var(--text-color);font-size:1rem;
-      transition:box-shadow .15s ease, border-color .15s ease;
-    }
-    .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:22px}
-    .toggles{display:flex;flex-wrap:wrap;gap:10px}
-    .toggle{
-      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;
-      transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
-    }
-    /* Hover effect for ALL options */
-    .toggle:hover{
-      transform:translateY(-1px);
-      border-color:var(--primary-color-start);
-      box-shadow:0 0 0 4px rgba(79,70,229,.12);
-      background:#ffffff;
-    }
-    /* Selected option looks "hovered" permanently */
-    .toggle[aria-pressed="true"]{
-      color:#fff;
-      border-color:transparent;
-      background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
-      box-shadow:0 0 0 5px rgba(79,70,229,.18);
-    }
-    /* Extra feedback when hovering a selected option */
-    .toggle[aria-pressed="true"]:hover{
-      box-shadow:0 0 0 7px rgba(79,70,229,.22);
-      transform:translateY(-1px) scale(1.01);
-    }
-    .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{
-      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));
-      transition:filter .15s ease, box-shadow .15s ease, transform .05s ease;
-    }
-    .btn:hover{filter:brightness(0.98)}
-    .btn:focus{outline:none;box-shadow:0 0 0 4px rgba(79,70,229,.15)}
-    .btn.hidden{display:none}
-    .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;max-width:100%}
-      h1{font-size:1.9em}
-      .btn{width:100%}
-      .cta-row{flex-direction:column}
-    }
-  </style>
 </head>
 <body>
-  <main class="app" role="application" aria-labelledby="title">
-    <h1 id="title">CourseMaster Pro</h1>
-    <p class="subtitle">Powered by <strong>coachproai</strong></p>
-    <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" />
-    </section>
-    <section class="options" aria-label="Options">
-      <div class="group" role="group" aria-label="Audience">
-        <span class="label">Audience</span>
-        <div class="toggles" data-name="audience">
-          <button class="toggle" type="button" aria-pressed="false">Students</button>
-          <button class="toggle" type="button" aria-pressed="false">Freelancers</button>
-          <button class="toggle" type="button" aria-pressed="false">Professionals</button>
-        </div>
-      </div>
-      <div class="group" role="group" aria-label="Level">
-        <span class="label">Level</span>
-        <div class="toggles" data-name="level">
-          <button class="toggle" type="button" aria-pressed="false">Beginner</button>
-          <button class="toggle" type="button" aria-pressed="false">Intermediate</button>
-          <button class="toggle" type="button" aria-pressed="false">Advanced</button>
-        </div>
-      </div>
-      <div class="group" role="group" aria-label="Delivery">
-        <span class="label">Delivery</span>
-        <div class="toggles" data-name="delivery">
-          <button class="toggle" type="button" aria-pressed="false">Live</button>
-          <button class="toggle" type="button" aria-pressed="false">Recorded</button>
-          <button class="toggle" type="button" aria-pressed="false">Hybrid</button>
-          <button class="toggle" type="button" aria-pressed="false">Offline</button>
-        </div>
-      </div>
-      <div class="group" role="group" aria-label="Language">
-        <span class="label">Language</span>
-        <div class="toggles" data-name="language">
-          <button class="toggle" type="button" aria-pressed="false">Auto</button>
-          <button class="toggle" type="button" aria-pressed="false">Urdu</button>
-          <button class="toggle" type="button" aria-pressed="false">English</button>
-          <button class="toggle" type="button" aria-pressed="false">Mixed</button>
-        </div>
-      </div>
-      <div class="group" role="group" aria-label="Tone">
-        <span class="label">Tone</span>
-        <div class="toggles" data-name="tone">
-          <button class="toggle" type="button" aria-pressed="false">Professional</button>
-          <button class="toggle" type="button" aria-pressed="false">Motivational</button>
-        </div>
-      </div>
-      <div class="group" role="group" aria-label="Depth">
-        <span class="label">Depth</span>
-        <div class="toggles" data-name="depth">
-          <button class="toggle" type="button" aria-pressed="false">Basic</button>
-          <button class="toggle" type="button" aria-pressed="false">Standard</button>
-          <button class="toggle" type="button" aria-pressed="false">Comprehensive</button>
-        </div>
-      </div>
-      <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>
-        </select>
-        <label for="export" class="label">Export</label>
-        <select id="export" class="input">
-          <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">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>
-    <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."></textarea>
-    </section>
-    <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">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"></div>
-    </section>
-    <div class="footer">© coachproai</div>
-  </main>
-  <script>
-    const GPT_URL='https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';
-    const $=s=>document.querySelector(s);
-    const $$=(s,root=document)=>Array.from(root.querySelectorAll(s));
-    // Toggle handling with instant preview update
-    $$(".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");
-        buildPrompt();
-      });
-      group.addEventListener("keydown",e=>{
-        if(!e.target.classList.contains("toggle"))return;
-        if(e.key===" "||e.key==="Enter"){ e.preventDefault(); e.target.click(); }
-      });
-    });
-    function buildPrompt(){
-      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) 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!";
-    }
-    ["#topic","#duration","#notes"].forEach(s=>$(s).addEventListener("input",buildPrompt));
-    $("#copy").addEventListener("click",async()=>{
-      const t=$("#out").textContent.trim();
-      if(!t) return;
-      await navigator.clipboard.writeText(t);
-      $("#hint").textContent="Copied!";
-    });
-    $("#copyOpen").addEventListener("click",async()=>{
-      const t=$("#out").textContent.trim();
-      if(!t) return;
-      await navigator.clipboard.writeText(t);
-      const win=window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`,"_blank");
-      if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; }
-    });
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>coachproai • CourseMaster Pro</title>
+    <style>
+        /* EduTeach Pro Style Guide Colors */
+        :root {
+            --primary-purple: #8A2BE2; /* Primary Purple */
+            --accent-purple: #F3E5F5; /* Accent Purple - For result/input background */
+            --text-color-main: #6A1B9A; /* Dark Text Color */
+            --main-bg: #ffffff; /* Main Background */
+            --container-bg: #f9f9f9; /* Container Background */
+            --button-border: #D1C4E9; /* Button Border */
+            --input-border: #ddd; /* Input/Display Field Border */
+            --heading-color: #8A2BE2;
+            --font-family: 'Arial', 'Helvetica', sans-serif;
+        }
+        /* Reset and Base Styles */
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            font-family: var(--font-family);
+            background: var(--main-bg);
+            color: #333; /* Default dark text */
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            font-size: 1em;
+            line-height: 1.6;
+        }
+        /* Container Styling */
+        .app {
+            width: 100%;
+            max-width: 450px; /* Max Width: 450px */
+            background-color: var(--container-bg);
+            padding: 30px; /* Padding: 30px */
+            border-radius: 15px; /* Border Radius: 15px */
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow */
+            position: relative;
+            border: 1px solid var(--button-border);
+        }
+        /* Top Border Styling */
+        .app::before {
+            content: "";
+            position: absolute;
+            inset: -5px -2px auto -2px; /* Top Border 5px */
+            height: 5px;
+            border-top-left-radius: 15px;
+            border-top-right-radius: 15px;
+            background: var(--primary-purple); /* Primary Purple Color */
+        }
+        /* Heading Styling */
+        h1 {
+            margin: 0 0 15px;
+            font-size: 2em; /* 32px */
+            color: var(--heading-color);
+            font-weight: bold;
+            text-align: center;
+            text-transform: uppercase;
+        }
+        .subtitle {
+            text-align: center;
+            color: #6a6a6a;
+            font-size: 0.9em;
+            margin-bottom: 25px;
+        }
+        /* Section/Group Styling (mimicking EduTeach Pro sections) */
+        .group, .top-input, .notes, .response {
+            margin-bottom: 25px;
+            padding: 15px;
+            border-radius: 10px;
+            background-color: var(--main-bg);
+            border: 1px solid var(--button-border);
+        }
+        .group:last-of-type { margin-bottom: 0; }
+        /* Label Styling */
+        .label {
+            color: var(--text-color-main); /* Dark Purple */
+            font-weight: bold;
+            margin-bottom: 8px;
+            display: block;
+            font-size: 1.1em;
+        }
+        /* Input/Textarea/Select Styling */
+        .input, select, textarea {
+            width: 100%;
+            padding: 15px;
+            border: 1px solid var(--input-border);
+            border-radius: 8px;
+            background: #fff;
+            color: #333;
+            font-size: 1.1em;
+            transition: box-shadow 0.15s ease, border-color 0.15s ease;
+            resize: vertical;
+        }
+        .input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: var(--primary-purple);
+            box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
+        }
+        /* Toggle/Button Group Styling */
+        .toggles {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        .toggle {
+            /* Button Default State */
+            flex-grow: 1;
+            border: 2px solid var(--button-border);
+            background: transparent;
+            color: var(--primary-purple);
+            padding: 12px 14px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            font-size: 1em;
+            transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+            text-align: center;
+            min-width: 100px;
+        }
+        /* Hover effect for ALL options */
+        .toggle:hover {
+            background-color: var(--accent-purple);
+            border-color: var(--primary-purple);
+            transform: none; /* Removed translate/scale for a simpler look */
+            box-shadow: none;
+        }
+        /* Selected option looks like the EduTeach Pro selected state */
+        .toggle[aria-pressed="true"] {
+            color: #ffffff;
+            border-color: var(--primary-purple);
+            background-color: var(--primary-purple);
+            box-shadow: 0 2px 5px rgba(138, 43, 226, 0.3);
+        }
+        /* Hover on selected option */
+        .toggle[aria-pressed="true"]:hover {
+            filter: brightness(1.1);
+        }
+        /* Prompt Output Box Styling */
+        .out {
+            background: var(--accent-purple);
+            border: 1px solid var(--primary-purple);
+            padding: 15px;
+            border-radius: 8px;
+            min-height: 100px;
+            white-space: pre-wrap;
+            font-size: 1em;
+            color: var(--text-color-main);
+            font-family: monospace;
+            overflow: auto;
+        }
+        /* CTA Buttons Row */
+        .cta-row {
+            margin-top: 15px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        /* Full Width CTA Button Styling (Generate & Copy) */
+        .btn {
+            flex: 1;
+            width: 100%; /* Ensure full width on small screens */
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.5em; /* 24px */
+            border: 3px solid var(--primary-purple); /* Primary Purple Outline */
+            color: var(--primary-purple);
+            background-color: transparent; /* Light background */
+            padding: 15px 18px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            text-transform: uppercase;
+        }
+        .btn:hover {
+            background-color: var(--primary-purple); /* Hover background */
+            color: var(--main-bg); /* Hover text color */
+        }
+        .btn.hidden { display: none !important; }
+        /* Hint/Footer */
+        .hint { margin-top: 10px; color: var(--text-color-main); font-size: 1em; min-height: 1.4em; text-align: center; }
+        .footer { text-align: center; color: #9ca3af; font-size: 0.9em; margin-top: 22px; }
+        /* Mobile Adjustments */
+        @media (max-width: 480px) {
+            .app { padding: 20px; border-radius: 12px; }
+            h1 { font-size: 1.7em; }
+            .btn { font-size: 1.2em; padding: 12px 15px; width: 100%; }
+            .toggles { gap: 6px; }
+            .toggle { min-width: 80px; padding: 10px 8px; font-size: 0.9em; }
+        }
+    </style>
 </head>
 <body>
+    <main class="app" role="application" aria-labelledby="title">
+        <h1 id="title">CourseMaster Pro</h1>
+        <p class="subtitle">Powered by <strong>coachproai</strong></p>
+        <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" />
+        </section>
+        <section class="options" aria-label="Options">
+            <div class="group" role="group" aria-label="Audience">
+                <span class="label">Audience</span>
+                <div class="toggles" data-name="Audience">
+                    <button class="toggle" type="button" aria-pressed="false">Students</button>
+                    <button class="toggle" type="button" aria-pressed="false">Freelancers</button>
+                    <button class="toggle" type="button" aria-pressed="false">Professionals</button>
+                </div>
+            </div>
+            <div class="group" role="group" aria-label="Level">
+                <span class="label">Level</span>
+                <div class="toggles" data-name="Level">
+                    <button class="toggle" type="button" aria-pressed="false">Beginner</button>
+                    <button class="toggle" type="button" aria-pressed="false">Intermediate</button>
+                    <button class="toggle" type="button" aria-pressed="false">Advanced</button>
+                </div>
+            </div>
+            <div class="group" role="group" aria-label="Delivery">
+                <span class="label">Delivery</span>
+                <div class="toggles" data-name="Delivery">
+                    <button class="toggle" type="button" aria-pressed="false">Live</button>
+                    <button class="toggle" type="button" aria-pressed="false">Recorded</button>
+                    <button class="toggle" type="button" aria-pressed="false">Hybrid</button>
+                    <button class="toggle" type="button" aria-pressed="false">Offline</button>
+                </div>
+            </div>
+            <div class="group" role="group" aria-label="Language">
+                <span class="label">Language</span>
+                <div class="toggles" data-name="Language">
+                    <button class="toggle" type="button" aria-pressed="false">Auto</button>
+                    <button class="toggle" type="button" aria-pressed="false">Urdu</button>
+                    <button class="toggle" type="button" aria-pressed="false">English</button>
+                    <button class="toggle" type="button" aria-pressed="false">Mixed</button>
+                </div>
+            </div>
+            <div class="group" role="group" aria-label="Tone">
+                <span class="label">Tone</span>
+                <div class="toggles" data-name="Tone">
+                    <button class="toggle" type="button" aria-pressed="false">Professional</button>
+                    <button class="toggle" type="button" aria-pressed="false">Motivational</button>
+                </div>
+            </div>
+            <div class="group" role="group" aria-label="Depth">
+                <span class="label">Depth</span>
+                <div class="toggles" data-name="Depth">
+                    <button class="toggle" type="button" aria-pressed="false">Basic</button>
+                    <button class="toggle" type="button" aria-pressed="false">Standard</button>
+                    <button class="toggle" type="button" aria-pressed="false">Comprehensive</button>
+                </div>
+            </div>
+            <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" style="margin-top: 15px;">Localization</label>
+                <select id="localization" class="input">
+                    <option>Auto</option><option>Pakistan</option><option>GCC</option><option>Global</option>
+                </select>
+                <label for="export" class="label" style="margin-top: 15px;">Export</label>
+                <select id="export" class="input">
+                    <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="Add-ons">
+                    <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>
+        <section class="notes">
+            <label class="label" for="notes">Notes</label>
+            <textarea id="notes" class="input" rows="4" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea>
+        </section>
+        <section class="response">
+            <span class="label">Prompt Preview</span>
+            <pre id="out" class="out" role="status" aria-live="polite">Please select options and enter Topic/Duration...</pre>
+            <div class="cta-row">
+                <button id="generate" class="btn cta" 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"></div>
+        </section>
+        <div class="footer">© coachproai</div>
+    </main>
+    <script>
+        const GPT_URL='https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';
+        const $=s=>document.querySelector(s);
+        const $$=(s,root=document)=>Array.from(root.querySelectorAll(s));
+        // Get elements
+        const outElement = $("#out");
+        const generateButton = $("#generate");
+        const copyOpenButton = $("#copyOpen");
+        // Toggle handling
+        $$(".toggles").forEach(group=>{
+            group.addEventListener("click",e=>{
+                if(!e.target.classList.contains("toggle"))return;
+                const btn=e.target;
+                const isMulti=!group.dataset.name.includes("Add-ons"); // Single selection logic
+                if(isMulti && btn.getAttribute("aria-pressed") !== "true"){
+                    $$(".toggle",group).forEach(b=>b.setAttribute("aria-pressed","false"));
+                }
+                btn.setAttribute("aria-pressed", btn.getAttribute("aria-pressed")==="true" ? "false" : "true");
+                buildPrompt();
+            });
+            group.addEventListener("keydown",e=>{
+                if(!e.target.classList.contains("toggle"))return;
+                if(e.key===" "||e.key==="Enter"){ e.preventDefault(); e.target.click(); }
+            });
+        });
+        let currentPrompt = "";
+        // Function to build and display the prompt (without typewriter for brevity)
+        function buildPrompt(){
+            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) p+=`\n- Duration: ${duration}`;
+            const loc=$("#localization").value;
+            if(loc && loc!=="Auto") p+=`\n- Localization: ${loc}`;
+            const exp=$("#export").value;
+            if(exp) p+=`\n- Export Format: ${exp}`;
+            if(notes) p+=`\n- Notes: ${notes}`;
+            currentPrompt = p.trim();
+            outElement.textContent = currentPrompt;
+            // Show/Hide CTA buttons based on valid topic
+            if (topic) {
+                generateButton.classList.add("hidden");
+                copyOpenButton.classList.remove("hidden");
+                $("#hint").textContent="Prompt ready! Click 'Copy & Paste Now'";
+            } else {
+                generateButton.classList.remove("hidden");
+                copyOpenButton.classList.add("hidden");
+                $("#hint").textContent="Enter a Topic and select options.";
+            }
+        }
+        // Event listeners for input changes
+        $$(".input, .textarea, select").forEach(s=>s.addEventListener("input",buildPrompt));
+        // Initial build to show placeholder
+        buildPrompt();
+        // Generate button (in this case, it just runs buildPrompt again)
+        generateButton.addEventListener("click", () => {
+             buildPrompt();
+             if (currentPrompt && currentPrompt.includes("Topic>>>")) {
+                $("#hint").textContent = "Please enter a valid Topic!";
+            }
+        });
+        // Copy and Open functionality
+        copyOpenButton.addEventListener("click",async()=>{
+            const t = currentPrompt;
+            if(!t || t.includes("Topic>>>")) {
+                 $("#hint").textContent = "Please enter a valid Topic!";
+                 return;
+            }
+            try {
+                await navigator.clipboard.writeText(t);
+                $("#hint").textContent="Copied! Opening Custom GPT...";
+                // Open GPT link
+                const win = window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`, "_blank");
+                if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; }
+            } catch (err) {
+                 $("#hint").textContent="Could not copy. Please copy the text manually and click again.";
+            }
+        });
+        // Initial check for topic and setting up buttons
+        if (!$("#topic").value.trim()) {
+            copyOpenButton.classList.add("hidden");
+            generateButton.textContent = "Generate Prompt";
+            generateButton.classList.remove("hidden");
+        }
+    </script>
 </body>
+</html>