Update index.html

index.html

@@ -24,12 +24,12 @@
       padding:24px;
       display:flex;
       justify-content:center;
-      font-size:1.05rem; /* bigger base font */
+      font-size:1.05rem;
       line-height:1.5;
     }
     .app{
       width:100%;
-      max-width:600px; /* wider */
+      max-width:600px;
       background:var(--container-bg);
       padding:36px;
       border-radius:18px;
@@ -61,6 +61,7 @@
     .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);
@@ -69,13 +70,36 @@
     .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;
+      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;
+      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;
@@ -86,14 +110,17 @@
       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}
-      h1{font-size:1.8em}
+      .app{padding:24px;border-radius:14px;max-width:100%}
+      h1{font-size:1.9em}
       .btn{width:100%}
       .cta-row{flex-direction:column}
     }
@@ -209,17 +236,24 @@
   <script>
     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=>{
+    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;
-        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");
+        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();
@@ -228,29 +262,32 @@
       $$(".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(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}`;
+      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);
-    });
+
+    ["#topic","#duration","#notes"].forEach(s=>$(s).addEventListener("input",buildPrompt));
+
     $("#copy").addEventListener("click",async()=>{
-      const t=$("#out").textContent;
+      const t=$("#out").textContent.trim();
+      if(!t) return;
       await navigator.clipboard.writeText(t);
       $("#hint").textContent="Copied!";
     });
     $("#copyOpen").addEventListener("click",async()=>{
-      const t=$("#out").textContent;
+      const t=$("#out").textContent.trim();
+      if(!t) return;
       await navigator.clipboard.writeText(t);
-      window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`,"_blank");
+      const win=window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`,"_blank");
+      if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; }
     });
   </script>
 </body>