Update index.html

index.html

@@ -5,370 +5,394 @@
   <title>EduAssess Pro — Smart Exam Paper Designer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <!-- ====== Inline Styles (Colorful App UI) ====== -->
+  <!-- ========== Inline Styles (Colorful App, Top Label Buttons that Expand) ========== -->
   <style>
     :root{
-      --bg: #0f172a;          /* slate-900 */
-      --panel: #0b1224;       /* deeper panel */
-      --muted:#94a3b8;        /* slate-400 */
-      --accent:#22d3ee;       /* cyan-400 */
-      --ring:#7c3aed;         /* violet-600 */
-      --ok:#10b981;           /* green-500 */
-      --warn:#f59e0b;         /* amber-500 */
-      --danger:#ef4444;       /* red-500 */
-      --white:#ffffff;
-      --shadow: 0 10px 30px rgba(0,0,0,.35);
-      --radius: 16px;
+      --bg: #0f172a; --panel:#0b1224; --muted:#94a3b8; --text:#e5e7eb; --white:#fff;
+      --ring:#7c3aed; --cyan:#22d3ee; --green:#10b981; --amber:#f59e0b; --pink:#ec4899; --violet:#8b5cf6; --blue:#3b82f6;
+      --shadow: 0 14px 30px rgba(0,0,0,.35); --radius: 16px;
     }
     *{box-sizing:border-box}
     html,body{height:100%}
     body{
-      margin:0;
+      margin:0; color:var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
       background:
         radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.35), transparent 60%),
         radial-gradient(1000px 700px at 110% 10%, rgba(34,211,238,.25), transparent 60%),
         linear-gradient(180deg, #0b1022 0%, #0f172a 100%);
-      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
-      color:var(--white);
     }
-
-    .wrap{
-      max-width:1100px;
-      margin:40px auto;
-      padding:24px;
-    }
-
+    .wrap{max-width:1100px; margin:32px auto; padding:20px;}
     .app{
-      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
-      border:1px solid rgba(148,163,184,.15);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
+      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
+      border:1px solid rgba(148,163,184,.16);
+      border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;
       backdrop-filter: blur(6px);
-      overflow:hidden;
-    }
-
-    .app__header{
-      display:flex; align-items:center; justify-content:space-between;
-      padding:24px;
-      border-bottom:1px solid rgba(148,163,184,.15);
-      background:
-        radial-gradient(600px 200px at 0% 0%, rgba(124,58,237,.25), transparent 60%),
-        radial-gradient(600px 200px at 100% 0%, rgba(34,211,238,.2), transparent 60%);
-    }
-    .title{
-      margin:0;
-      font-weight:800;
-      letter-spacing:.3px;
-      line-height:1.1;
-      font-size: clamp(20px, 3vw, 28px);
     }
-    .subtitle{
-      margin:6px 0 0 0;
-      color:var(--muted);
-      font-size:14px;
+    .header{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 10px 20px}
+    .title{margin:0; font-size: clamp(20px, 3.2vw, 28px); font-weight:800; letter-spacing:.2px}
+    .subtitle{margin:6px 0 0 0; color:var(--muted); font-size:13px}
+    .badge{border:1px dashed rgba(148,163,184,.35); padding:8px 12px; border-radius:12px; color:var(--muted); font-size:12px}
+
+    /* Top label bar */
+    .labelbar{
+      display:flex; gap:10px; overflow:auto; padding:12px 16px; border-top:1px solid rgba(148,163,184,.12);
+      border-bottom:1px solid rgba(148,163,184,.12); background:rgba(2,6,23,.45);
     }
-
-    .badge{
-      border:1px dashed rgba(148,163,184,.35);
-      padding:8px 12px;
-      border-radius:12px;
-      color:var(--muted);
-      font-size:12px;
-    }
-
-    .grid{
-      display:grid;
-      gap:18px;
-      grid-template-columns: repeat(12, 1fr);
-      padding:24px;
-    }
-    @media (max-width: 980px){
-      .grid{grid-template-columns: repeat(6, 1fr);}
-    }
-    @media (max-width: 640px){
-      .grid{grid-template-columns: repeat(4, 1fr);}
-    }
-
-    .card{
-      grid-column: span 12;
-      background: rgba(2,6,23,.35);
-      border:1px solid rgba(148,163,184,.14);
-      border-radius:14px;
-      overflow:hidden;
-    }
-    .card__head{
-      padding:16px 16px 0 16px;
-    }
-    .card__title{
-      margin:0;
-      font-size:16px;
-      letter-spacing:.3px;
-      color:#cbd5e1;
+    .label-btn{
+      appearance:none; border:none; cursor:pointer; padding:12px 16px; border-radius:999px; color:#062028; font-weight:900;
+      letter-spacing:.2px; white-space:nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.25); outline:2px solid transparent; outline-offset:2px;
+      transition: transform .15s ease, box-shadow .15s ease, filter .15s;
     }
-    .card__body{
-      padding:16px;
-      display:flex; flex-wrap:wrap; gap:10px;
+    .label-btn:hover{ transform: translateY(-2px); }
+    .label-btn.active{ outline-color: rgba(34,211,238,.5); box-shadow: 0 10px 28px rgba(34,211,238,.28); }
+
+    /* Distinct palettes per label */
+    .lb-grade   { background: linear-gradient(135deg,#3b82f6,#22d3ee); }
+    .lb-subject { background: linear-gradient(135deg,#8b5cf6,#ec4899); }
+    .lb-board   { background: linear-gradient(135deg,#10b981,#84cc16); }
+    .lb-test    { background: linear-gradient(135deg,#f59e0b,#ef4444); }
+    .lb-qtype   { background: linear-gradient(135deg,#06b6d4,#6366f1); }
+    .lb-adv     { background: linear-gradient(135deg,#14b8a6,#8b5cf6); }
+    .lb-follow  { background: linear-gradient(135deg,#22d3ee,#10b981); }
+
+    /* Panels */
+    .panel{
+      display:none; padding:16px; background:rgba(2,6,23,.6);
+      border-bottom:1px solid rgba(148,163,184,.14);
     }
-
-    /* ===== Pill Buttons (colorful) ===== */
-    .btn{
-      --btn-bg: #334155;
-      --btn-txt: #e2e8f0;
-      --btn-ring: transparent;
-      appearance:none; border:none; cursor:pointer;
-      padding:12px 16px; min-width:110px;
-      border-radius:999px;
-      background: var(--btn-bg);
-      color: var(--btn-txt);
-      font-weight:700; font-size:14px; letter-spacing:.2px;
+    .panel.show{ display:block; animation: slide .18s ease; }
+    @keyframes slide{ from{opacity:.0; transform: translateY(-6px);} to{opacity:1; transform: translateY(0);} }
+
+    .group{display:flex; flex-wrap:wrap; gap:10px}
+    .opt{
+      --bg:#334155; --txt:#e2e8f0;
+      appearance:none; border:none; cursor:pointer; padding:12px 14px; min-width:118px;
+      border-radius:12px; background: var(--bg); color:var(--txt); font-weight:700; letter-spacing:.2px;
       transition: transform .15s ease, box-shadow .15s ease, background .15s ease, outline-color .15s ease;
       outline:2px solid transparent; outline-offset:2px;
     }
-    .btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
-    .btn:active{ transform: translateY(0); }
+    .opt:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
+    .opt.active{ background: linear-gradient(135deg,#10b981,#22d3ee); color:#07222c; box-shadow: 0 10px 28px rgba(16,185,129,.35); outline-color: rgba(34,211,238,.45); }
 
-    .btn--active{
-      box-shadow: 0 8px 30px rgba(16,185,129,.35);
-      outline-color: rgba(34,211,238,.45);
+    .row{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
+    .input{
+      background:#0b1224; color:var(--text); border:1px solid rgba(148,163,184,.3); border-radius:12px;
+      padding:12px 14px; outline:none; width:100%; font-weight:600;
     }
 
-    /* category palettes */
-    .grade   .btn{ --btn-bg: linear-gradient(135deg,#2563eb,#22d3ee); }
-    .subject .btn{ --btn-bg: linear-gradient(135deg,#7c3aed,#ec4899); }
-    .board   .btn{ --btn-bg: linear-gradient(135deg,#22c55e,#84cc16); }
-    .test    .btn{ --btn-bg: linear-gradient(135deg,#f59e0b,#ef4444); }
-    .qtype   .btn{ --btn-bg: linear-gradient(135deg,#06b6d4,#6366f1); }
-    .adv     .btn{ --btn-bg: linear-gradient(135deg,#14b8a6,#8b5cf6); }
-
-    /* Generate button */
+    .generate-wrap{ padding:16px; }
     .generate{
-      width:100%;
-      padding:16px;
-      border-radius:14px;
-      background: linear-gradient(135deg, #10b981, #22d3ee);
-      color:#001923;
-      font-weight:900; font-size:16px; letter-spacing:.4px;
-      border:none; cursor:pointer;
-      box-shadow: 0 10px 28px rgba(34,211,238,.25);
-      transition: transform .15s ease, box-shadow .15s ease, filter .15s;
-    }
-    .generate:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(34,211,238,.35); }
-    .generate:active{ transform: translateY(0); }
-
-    /* Result box */
-    .result{
-      display:none;
-      margin-top:16px;
-      background: rgba(2,6,23,.6);
-      border:1px solid rgba(148,163,184,.2);
-      border-radius:14px; padding:16px;
-    }
-    .result p{
-      margin:0 0 10px 0; color:#e2e8f0; text-align:center; font-weight:700;
+      width:100%; padding:16px; border-radius:14px; border:none; cursor:pointer;
+      background: linear-gradient(135deg, #10b981, #22d3ee); color:#051e28; font-weight:900; letter-spacing:.3px;
+      box-shadow: 0 12px 30px rgba(34,211,238,.28); transition: transform .15s ease, box-shadow .15s ease;
     }
+    .generate:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(34,211,238,.35); }
+
+    .result{ display:none; margin:0 16px 16px; background: rgba(2,6,23,.6); border:1px solid rgba(148,163,184,.2); border-radius:14px; padding:16px; }
+    .result p{ margin:0 0 10px 0; color:#e2e8f0; text-align:center; font-weight:800; }
     textarea{
-      width:100%; height:130px; resize:vertical;
-      background:#0b1224; color:#e2e8f0; border:1px solid rgba(148,163,184,.25);
-      border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      outline:none;
+      width:100%; height:140px; resize:vertical; background:#0b1224; color:#e2e8f0;
+      border:1px solid rgba(148,163,184,.25); border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
     }
     .open-gpt{
-      margin-top:12px; display:none;
-      width:100%; padding:12px 16px; border-radius:12px; border:none; cursor:pointer;
-      background: linear-gradient(135deg,#8b5cf6,#22d3ee);
-      color:#06121b; font-weight:900; letter-spacing:.3px;
+      margin-top:12px; width:100%; padding:12px 16px; border-radius:12px; border:none; cursor:pointer;
+      background: linear-gradient(135deg,#8b5cf6,#22d3ee); color:#06121b; font-weight:900; letter-spacing:.3px; display:none;
       box-shadow: 0 10px 28px rgba(139,92,246,.35);
     }
-    .footer{
-      padding:0 24px 24px 24px; color:var(--muted); font-size:12px; text-align:center;
-    }
-
-    /* Layout spans */
-    .span-6{ grid-column: span 6; }
-    .span-12{ grid-column: span 12; }
-    @media (max-width: 980px){ .span-6{ grid-column: span 12; } }
+    .footer{ padding:0 20px 20px; color:var(--muted); font-size:12px; text-align:center; }
   </style>
 </head>
 <body>
   <div class="wrap">
     <div class="app" role="application" aria-label="EduAssess Pro — Smart Exam Paper Designer">
-      <div class="app__header">
+      <div class="header">
         <div>
           <h1 class="title">EduAssess Pro — Smart Exam Paper Designer</h1>
-          <p class="subtitle">Pick options with colorful buttons, generate a prompt, and jump straight into your Custom GPT.</p>
+          <p class="subtitle">Select everything here with colorful top labels. Generate → auto-copy prompt → open Custom GPT.</p>
         </div>
         <div class="badge">Static • Hugging Face Ready</div>
       </div>
 
-      <div class="grid">
-
-        <!-- Grade -->
-        <section class="card span-6 grade" aria-labelledby="grade-h">
-          <div class="card__head"><h2 id="grade-h" class="card__title">1) Select Grade</h2></div>
-          <div class="card__body" id="grade-options">
-            <button class="btn" data-type="grade" data-value="Grade 1">Grade 1</button>
-            <button class="btn" data-type="grade" data-value="Grade 2">Grade 2</button>
-            <button class="btn" data-type="grade" data-value="Grade 3">Grade 3</button>
-            <button class="btn" data-type="grade" data-value="Grade 4">Grade 4</button>
-            <button class="btn" data-type="grade" data-value="Grade 5">Grade 5</button>
-            <button class="btn" data-type="grade" data-value="Grade 6">Grade 6</button>
-            <button class="btn" data-type="grade" data-value="Grade 7">Grade 7</button>
-            <button class="btn" data-type="grade" data-value="Grade 8">Grade 8</button>
-            <button class="btn" data-type="grade" data-value="Grade 9">Grade 9</button>
-            <button class="btn" data-type="grade" data-value="Grade 10">Grade 10</button>
-            <button class="btn" data-type="grade" data-value="Grade 11">Grade 11</button>
-            <button class="btn" data-type="grade" data-value="Grade 12">Grade 12</button>
+      <!-- ========== TOP LABEL BUTTONS (click to expand their panel below) ========== -->
+      <div class="labelbar" id="labelBar">
+        <button class="label-btn lb-grade"  data-panel="p-grade">Grade</button>
+        <button class="label-btn lb-subject" data-panel="p-subject">Subject</button>
+        <button class="label-btn lb-board"  data-panel="p-board">Board</button>
+        <button class="label-btn lb-test"   data-panel="p-test">Test Type</button>
+        <button class="label-btn lb-qtype"  data-panel="p-qtype">Question Types</button>
+        <button class="label-btn lb-adv"    data-panel="p-adv">Advanced</button>
+        <button class="label-btn lb-follow" data-panel="p-follow">Follow-up Details</button>
+      </div>
+
+      <!-- ========== PANELS ========== -->
+      <div id="p-grade" class="panel">
+        <div class="group" id="grade-options">
+          <button class="opt" data-type="grade" data-value="Grade 1">Grade 1</button>
+          <button class="opt" data-type="grade" data-value="Grade 2">Grade 2</button>
+          <button class="opt" data-type="grade" data-value="Grade 3">Grade 3</button>
+          <button class="opt" data-type="grade" data-value="Grade 4">Grade 4</button>
+          <button class="opt" data-type="grade" data-value="Grade 5">Grade 5</button>
+          <button class="opt" data-type="grade" data-value="Grade 6">Grade 6</button>
+          <button class="opt" data-type="grade" data-value="Grade 7">Grade 7</button>
+          <button class="opt" data-type="grade" data-value="Grade 8">Grade 8</button>
+          <button class="opt" data-type="grade" data-value="Grade 9">Grade 9</button>
+          <button class="opt" data-type="grade" data-value="Grade 10">Grade 10</button>
+          <button class="opt" data-type="grade" data-value="Grade 11">Grade 11</button>
+          <button class="opt" data-type="grade" data-value="Grade 12">Grade 12</button>
+        </div>
+      </div>
+
+      <div id="p-subject" class="panel">
+        <div class="group" id="subject-options">
+          <button class="opt" data-type="subject" data-value="Mathematics">Mathematics</button>
+          <button class="opt" data-type="subject" data-value="Urdu">Urdu</button>
+          <button class="opt" data-type="subject" data-value="English">English</button>
+          <button class="opt" data-type="subject" data-value="Science">Science</button>
+          <button class="opt" data-type="subject" data-value="Physics">Physics</button>
+          <button class="opt" data-type="subject" data-value="Chemistry">Chemistry</button>
+          <button class="opt" data-type="subject" data-value="Biology">Biology</button>
+          <button class="opt" data-type="subject" data-value="Computer Science">Computer Science</button>
+          <button class="opt" data-type="subject" data-value="Islamiat">Islamiat</button>
+          <button class="opt" data-type="subject" data-value="Pakistan Studies">Pakistan Studies</button>
+        </div>
+      </div>
+
+      <div id="p-board" class="panel">
+        <div class="group" id="board-options">
+          <button class="opt" data-type="board" data-value="PCTB (Punjab)">PCTB (Punjab)</button>
+          <button class="opt" data-type="board" data-value="FBISE (Federal)">FBISE (Federal)</button>
+          <button class="opt" data-type="board" data-value="Sindh Board">Sindh Board</button>
+          <button class="opt" data-type="board" data-value="KPK Board">KPK Board</button>
+          <button class="opt" data-type="board" data-value="Balochistan Board">Balochistan Board</button>
+          <button class="opt" data-type="board" data-value="AKUEB">AKUEB</button>
+        </div>
+      </div>
+
+      <div id="p-test" class="panel">
+        <div class="group" id="test-type-options">
+          <button class="opt" data-type="testType" data-value="Summative">Summative</button>
+          <button class="opt" data-type="testType" data-value="Formative">Formative</button>
+          <button class="opt" data-type="testType" data-value="Diagnostic">Diagnostic</button>
+        </div>
+      </div>
+
+      <div id="p-qtype" class="panel">
+        <div class="group" id="question-type-options">
+          <button class="opt" data-type="questionType" data-value="MCQs">MCQs</button>
+          <button class="opt" data-type="questionType" data-value="Short Questions">Short Questions</button>
+          <button class="opt" data-type="questionType" data-value="Long Questions">Long Questions</button>
+          <button class="opt" data-type="questionType" data-value="Practical / Diagram-based Questions">Practical / Diagram</button>
+          <button class="opt" data-type="questionType" data-value="Moral / Ethical Questions">Moral / Ethical</button>
+          <button class="opt" data-type="questionType" data-value="Islamic Questions">Islamic</button>
+        </div>
+      </div>
+
+      <div id="p-adv" class="panel">
+        <div class="group">
+          <button class="opt" id="bloom-toggle" data-type="bloom" data-value="no">Bloom's Levels: No</button>
+          <button class="opt" data-type="difficulty" data-value="Easy">Easy</button>
+          <button class="opt" data-type="difficulty" data-value="Moderate">Moderate</button>
+          <button class="opt" data-type="difficulty" data-value="Hard">Hard</button>
+          <button class="opt" data-type="language" data-value="English">English</button>
+          <button class="opt" data-type="language" data-value="Urdu">Urdu</button>
+          <button class="opt" data-type="language" data-value="Bilingual">Bilingual</button>
+        </div>
+      </div>
+
+      <!-- ===== FOLLOW-UP (from GPT confirmation) ===== -->
+      <div id="p-follow" class="panel">
+        <!-- Topic/Unit -->
+        <div style="margin-bottom:12px;">
+          <div class="group" style="margin-bottom:8px;">
+            <button class="opt active" data-type="topicPreset" data-value="Unit 1–3">Topic/Unit: Unit 1–3</button>
+            <button class="opt" data-type="topicPreset" data-value="Unit 4–6">Topic/Unit: Unit 4–6</button>
+            <button class="opt" data-type="topicPreset" data-value="Full Syllabus">Topic/Unit: Full Syllabus</button>
           </div>
-        </section>
-
-        <!-- Subject -->
-        <section class="card span-6 subject" aria-labelledby="subject-h">
-          <div class="card__head"><h2 id="subject-h" class="card__title">2) Select Subject</h2></div>
-          <div class="card__body" id="subject-options">
-            <button class="btn" data-type="subject" data-value="Mathematics">Mathematics</button>
-            <button class="btn" data-type="subject" data-value="Urdu">Urdu</button>
-            <button class="btn" data-type="subject" data-value="English">English</button>
-            <button class="btn" data-type="subject" data-value="Science">Science</button>
-            <button class="btn" data-type="subject" data-value="Physics">Physics</button>
-            <button class="btn" data-type="subject" data-value="Chemistry">Chemistry</button>
-            <button class="btn" data-type="subject" data-value="Biology">Biology</button>
-            <button class="btn" data-type="subject" data-value="Computer Science">Computer Science</button>
-            <button class="btn" data-type="subject" data-value="Islamiat">Islamiat</button>
-            <button class="btn" data-type="subject" data-value="Pakistan Studies">Pakistan Studies</button>
+          <div class="row">
+            <input id="topicCustom" class="input" type="text" placeholder="Or type specific units/topics e.g., Unit 2 (Poem), Unit 3 (Reading Comprehension)">
           </div>
-        </section>
-
-        <!-- Board -->
-        <section class="card span-6 board" aria-labelledby="board-h">
-          <div class="card__head"><h2 id="board-h" class="card__title">3) Select Board</h2></div>
-          <div class="card__body" id="board-options">
-            <button class="btn" data-type="board" data-value="PCTB (Punjab)">PCTB (Punjab)</button>
-            <button class="btn" data-type="board" data-value="FBISE (Federal)">FBISE (Federal)</button>
-            <button class="btn" data-type="board" data-value="Sindh Board">Sindh Board</button>
-            <button class="btn" data-type="board" data-value="KPK Board">KPK Board</button>
-            <button class="btn" data-type="board" data-value="Balochistan Board">Balochistan Board</button>
-            <button class="btn" data-type="board" data-value="AKUEB">AKUEB</button>
+        </div>
+        <!-- Number of MCQs -->
+        <div style="margin-bottom:12px;">
+          <div class="group" id="mcq-count">
+            <button class="opt" data-type="mcqs" data-value="5">MCQs: 5</button>
+            <button class="opt" data-type="mcqs" data-value="10">MCQs: 10</button>
+            <button class="opt" data-type="mcqs" data-value="15">MCQs: 15</button>
+            <button class="opt" data-type="mcqs" data-value="20">MCQs: 20</button>
+            <button class="opt" data-type="mcqs" data-value="25">MCQs: 25</button>
+            <button class="opt" data-type="mcqs" data-value="30">MCQs: 30</button>
           </div>
-        </section>
-
-        <!-- Test Type -->
-        <section class="card span-6 test" aria-labelledby="test-h">
-          <div class="card__head"><h2 id="test-h" class="card__title">4) Select Test Type</h2></div>
-          <div class="card__body" id="test-type-options">
-            <button class="btn" data-type="testType" data-value="Summative">Summative</button>
-            <button class="btn" data-type="testType" data-value="Formative">Formative</button>
-            <button class="btn" data-type="testType" data-value="Diagnostic">Diagnostic</button>
+          <div class="row">
+            <input id="mcqCustom" class="input" type="number" min="1" step="1" placeholder="Or enter custom MCQ count e.g., 12">
           </div>
-        </section>
-
-        <!-- Question Types -->
-        <section class="card span-12 qtype" aria-labelledby="qtype-h">
-          <div class="card__head"><h2 id="qtype-h" class="card__title">5) Select Question Types (Multi-select)</h2></div>
-          <div class="card__body" id="question-type-options">
-            <button class="btn" data-type="questionType" data-value="MCQs">MCQs</button>
-            <button class="btn" data-type="questionType" data-value="Short Questions">Short Questions</button>
-            <button class="btn" data-type="questionType" data-value="Long Questions">Long Questions</button>
-            <button class="btn" data-type="questionType" data-value="Practical / Diagram-based Questions">Practical / Diagram</button>
-            <button class="btn" data-type="questionType" data-value="Moral / Ethical Questions">Moral / Ethical</button>
-            <button class="btn" data-type="questionType" data-value="Islamic Questions">Islamic</button>
+        </div>
+        <!-- Bloom’s Level -->
+        <div style="margin-bottom:12px;">
+          <div class="group">
+            <button class="opt" data-type="bloomFollow" data-value="yes">Bloom’s Level: Yes</button>
+            <button class="opt" data-type="bloomFollow" data-value="no">Bloom’s Level: No</button>
           </div>
-        </section>
-
-        <!-- Advanced -->
-        <section class="card span-12 adv" aria-labelledby="adv-h">
-          <div class="card__head"><h2 id="adv-h" class="card__title">6) Advanced Options</h2></div>
-          <div class="card__body" id="advanced-options">
-            <button class="btn" id="bloom-toggle" data-type="bloom" data-value="no">Bloom's Levels: No</button>
-            <button class="btn" data-type="difficulty" data-value="Easy">Easy</button>
-            <button class="btn" data-type="difficulty" data-value="Moderate">Moderate</button>
-            <button class="btn" data-type="difficulty" data-value="Hard">Hard</button>
-            <button class="btn" data-type="language" data-value="English">English</button>
-            <button class="btn" data-type="language" data-value="Urdu">Urdu</button>
-            <button class="btn" data-type="language" data-value="Bilingual">Bilingual</button>
+        </div>
+        <!-- Time Duration -->
+        <div style="margin-bottom:12px;">
+          <div class="group" id="time-dur">
+            <button class="opt" data-type="duration" data-value="20 minutes">Time: 20 minutes</button>
+            <button class="opt" data-type="duration" data-value="30 minutes">Time: 30 minutes</button>
+            <button class="opt" data-type="duration" data-value="45 minutes">Time: 45 minutes</button>
+            <button class="opt" data-type="duration" data-value="60 minutes">Time: 60 minutes</button>
+            <button class="opt" data-type="duration" data-value="No time limit">Time: No time limit</button>
           </div>
-        </section>
-
-        <!-- Generate -->
-        <section class="card span-12">
-          <div class="card__body">
-            <button id="generatePromptBtn" class="generate">Generate Prompt & Open Custom GPT</button>
-            <div id="result" class="result" role="region" aria-live="polite" aria-label="Prompt Result">
-              <p id="ready-text">your prompt is Ready Now Paste it</p>
-              <textarea id="promptOutput" readonly></textarea>
-              <button id="openGptBtn" class="open-gpt">Open EduAssess Pro GPT</button>
-            </div>
+          <div class="row">
+            <input id="timeCustom" class="input" type="text" placeholder="Or type a custom duration e.g., 35 minutes">
           </div>
-        </section>
+        </div>
+        <!-- Islamic/Moral Question -->
+        <div style="margin-bottom:4px;">
+          <div class="group">
+            <button class="opt" data-type="moral" data-value="yes">Include Islamic/Moral MCQ: Yes</button>
+            <button class="opt" data-type="moral" data-value="no">Include Islamic/Moral MCQ: No</button>
+          </div>
+        </div>
+      </div>
 
+      <!-- ========== GENERATE ========== -->
+      <div class="generate-wrap">
+        <button id="generate" class="generate">Generate Prompt & Open Custom GPT</button>
       </div>
 
-      <div class="footer">© EduAssess Pro — Static Space • Beautiful colorful buttons • Copy to clipboard • Auto-open Custom GPT</div>
+      <!-- ========== RESULT ========== -->
+      <div id="result" class="result" role="region" aria-live="polite" aria-label="Prompt Result">
+        <p id="ready-text">your prompt is Ready Now Paste it</p>
+        <textarea id="promptOutput" readonly></textarea>
+        <button id="openGptBtn" class="open-gpt">Open EduAssess Pro GPT</button>
+      </div>
+
+      <div class="footer">© EduAssess Pro — Colorful top labels • Expand on click • Copy to clipboard • Auto-open Custom GPT</div>
     </div>
   </div>
 
-  <!-- ====== Config: Your Custom GPT URL ====== -->
+  <!-- ===== Config: Your Custom GPT URL ===== -->
   <script>
     window.CUSTOM_GPT_URL = "https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
   </script>
 
-  <!-- ====== Inline App Logic ====== -->
+  <!-- ========== Inline App Logic (No external files) ========== -->
   <script>
     (function(){
       const CUSTOM_GPT_URL = window.CUSTOM_GPT_URL;
-      const options = {
+
+      // State
+      const S = {
         grade:null, subject:null, board:null, testType:null,
-        questionTypes:[], bloom:"no", difficulty:null, language:null
+        questionTypes:[], bloom:'no', difficulty:null, language:null,
+        // follow-up
+        topic:null, mcqs:null, bloomFollow:null, duration:null, moral:null
       };
 
+      // Helpers
       const $ = (s)=>document.querySelector(s);
       const $$ = (s)=>document.querySelectorAll(s);
 
-      function setActive(groupSelector, btn){
-        $$(groupSelector+' .btn[data-type="'+btn.dataset.type+'"]').forEach(b=>b.classList.remove('btn--active'));
-        btn.classList.add('btn--active');
-      }
+      // Label bar expand logic
+      $$('#labelBar .label-btn').forEach(btn=>{
+        btn.addEventListener('click', ()=>{
+          const id = btn.dataset.panel;
+          // toggle active class and open/close the matching panel; close others
+          $$('#labelBar .label-btn').forEach(b=>b.classList.remove('active'));
+          btn.classList.add('active');
+          document.querySelectorAll('.panel').forEach(p=>{
+            if(p.id === id){ p.classList.toggle('show'); }
+            else{ p.classList.remove('show'); }
+          });
+        });
+      });
 
-      function toggleActive(btn){ btn.classList.toggle('btn--active'); }
-
-      function handleClick(btn){
-        const type = btn.dataset.type, value = btn.dataset.value;
-        if(type !== 'questionType' && type !== 'bloom'){
-          setActive('.card__body', btn);
-          options[type] = value;
-        } else if(type === 'questionType'){
-          toggleActive(btn);
-          if(options.questionTypes.includes(value)){
-            options.questionTypes = options.questionTypes.filter(v => v !== value);
-          } else { options.questionTypes.push(value); }
-        }
+      // Option selection
+      function singleSelect(type, el){
+        // remove active from all of same type
+        document.querySelectorAll('.opt[data-type="'+type+'"]').forEach(b=>b.classList.remove('active'));
+        el.classList.add('active');
+        S[type] = el.dataset.value;
+      }
+      function multiToggle(arrayKey, value, el){
+        el.classList.toggle('active');
+        const arr = new Set(S[arrayKey] || []);
+        if(arr.has(value)) arr.delete(value); else arr.add(value);
+        S[arrayKey] = [...arr];
       }
 
-      // Attach to all option buttons except bloom (handled separately)
-      $$('.btn[data-type]').forEach(btn=>{
-        if(btn.id === 'bloom-toggle') return;
-        btn.addEventListener('click', ()=>handleClick(btn));
+      // Attach for main options
+      document.querySelectorAll('.opt[data-type="grade"]').forEach(b=>b.addEventListener('click',()=>singleSelect('grade',b)));
+      document.querySelectorAll('.opt[data-type="subject"]').forEach(b=>b.addEventListener('click',()=>singleSelect('subject',b)));
+      document.querySelectorAll('.opt[data-type="board"]').forEach(b=>b.addEventListener('click',()=>singleSelect('board',b)));
+      document.querySelectorAll('.opt[data-type="testType"]').forEach(b=>b.addEventListener('click',()=>singleSelect('testType',b)));
+      document.querySelectorAll('.opt[data-type="questionType"]').forEach(b=>b.addEventListener('click',()=>multiToggle('questionTypes', b.dataset.value, b)));
+      // Advanced
+      $('#bloom-toggle').addEventListener('click', (e)=>{
+        const el = e.currentTarget;
+        el.classList.toggle('active');
+        const on = el.classList.contains('active');
+        el.dataset.value = on ? 'yes' : 'no';
+        el.textContent = on ? "Bloom's Levels: Yes" : "Bloom's Levels: No";
+        S.bloom = on ? 'yes' : 'no';
+      });
+      document.querySelectorAll('.opt[data-type="difficulty"]').forEach(b=>b.addEventListener('click',()=>singleSelect('difficulty',b)));
+      document.querySelectorAll('.opt[data-type="language"]').forEach(b=>b.addEventListener('click',()=>singleSelect('language',b)));
+
+      // Follow-up
+      document.querySelectorAll('.opt[data-type="topicPreset"]').forEach(b=>b.addEventListener('click',()=>{
+        document.querySelectorAll('.opt[data-type="topicPreset"]').forEach(x=>x.classList.remove('active'));
+        b.classList.add('active');
+        S.topic = b.dataset.value;
+      }));
+      $('#topicCustom').addEventListener('input', e=>{
+        const val = e.target.value.trim();
+        if(val){ S.topic = val; document.querySelectorAll('.opt[data-type="topicPreset"]').forEach(x=>x.classList.remove('active')); }
       });
 
-      // Bloom toggle
-      const bloomToggle = $('#bloom-toggle');
-      bloomToggle.addEventListener('click', ()=>{
-        bloomToggle.classList.toggle('btn--active');
-        const on = bloomToggle.classList.contains('btn--active');
-        bloomToggle.textContent = on ? "Bloom's Levels: Yes" : "Bloom's Levels: No";
-        bloomToggle.dataset.value = on ? 'yes' : 'no';
-        options.bloom = on ? 'yes' : 'no';
+      document.querySelectorAll('.opt[data-type="mcqs"]').forEach(b=>b.addEventListener('click',()=>{
+        singleSelect('mcqs', b);
+      }));
+      $('#mcqCustom').addEventListener('input', e=>{
+        const n = parseInt(e.target.value, 10);
+        if(!isNaN(n) && n>0){ S.mcqs = String(n); document.querySelectorAll('.opt[data-type="mcqs"]').forEach(x=>x.classList.remove('active')); }
       });
 
+      document.querySelectorAll('.opt[data-type="bloomFollow"]').forEach(b=>b.addEventListener('click',()=>singleSelect('bloomFollow', b)));
+      document.querySelectorAll('.opt[data-type="duration"]').forEach(b=>b.addEventListener('click',()=>{
+        singleSelect('duration', b);
+      }));
+      $('#timeCustom').addEventListener('input', e=>{
+        const val = e.target.value.trim();
+        if(val){ S.duration = val; document.querySelectorAll('.opt[data-type="duration"]').forEach(x=>x.classList.remove('active')); }
+      });
+      document.querySelectorAll('.opt[data-type="moral"]').forEach(b=>b.addEventListener('click',()=>singleSelect('moral', b)));
+
+      // Build prompt (includes follow-up)
       function buildPrompt(o){
-        let p = `I need a paper for ${o.grade}, on the subject of ${o.subject}, aligned with the ${o.board}. The test type is ${o.testType}. Please include the following question types: ${o.questionTypes.join(', ')}.`;
+        let p = `I need a paper for ${o.grade}, on the subject of ${o.subject}, aligned with the ${o.board}. The test type is ${o.testType}. Please include the following question types: ${o.questionTypes?.join(', ')}.`;
         if(o.bloom === 'yes') p += " The questions should be based on Bloom's Taxonomy.";
         if(o.difficulty) p += ` The difficulty level should be ${o.difficulty}.`;
         if(o.language) p += ` The paper should be in ${o.language}.`;
+
+        // Follow-up details to ensure GPT answers without more questions:
+        const f = [];
+        if(o.topic) f.push(`Topic/Unit: ${o.topic}`);
+        if(o.mcqs) f.push(`Number of MCQs: ${o.mcqs}`);
+        if(o.bloomFollow) f.push(`Bloom's Level (follow-up): ${o.bloomFollow}`);
+        if(o.duration) f.push(`Time Duration: ${o.duration}`);
+        if(o.moral) f.push(`Islamic/Moral MCQ: ${o.moral}`);
+        if(f.length) p += ` Details: ${f.join('; ')}.`;
+
         return p;
       }
+
       function ready(o){
-        return !!(o.grade && o.subject && o.board && o.testType && o.questionTypes.length>0 && o.language);
+        // Required core + follow-up minimal set for MCQs-only flows
+        const base = !!(o.grade && o.subject && o.board && o.testType && (o.questionTypes?.length>0) && o.language);
+        return base;
       }
+
       async function copy(text){
         try{
           if(navigator.clipboard && window.isSecureContext){ await navigator.clipboard.writeText(text); return; }
@@ -380,43 +404,16 @@
       const resultBox = $('#result');
       const promptOutput = $('#promptOutput');
       const openBtn = $('#openGptBtn');
-      const generateBtn = $('#generatePromptBtn');
-
-      // Difficulty & Language single-select grouping
-      function exclusiveClickSetup(attr){
-        $(`.adv`).querySelectorAll(`.btn[data-type="${attr}"]`).forEach(b=>{
-          b.addEventListener('click', ()=>{
-            // remove active from siblings of same type
-            $(`.adv`).querySelectorAll(`.btn[data-type="${attr}"]`).forEach(x=>x.classList.remove('btn--active'));
-            b.classList.add('btn--active');
-            options[attr] = b.dataset.value;
-          });
-        });
-      }
-      exclusiveClickSetup('difficulty');
-      exclusiveClickSetup('language');
-
-      // Board/Grade/Subject/Test single-select grouping
-      ['grade','subject','board','testType'].forEach(attr=>{
-        document.querySelectorAll(`.btn[data-type="${attr}"]`).forEach(b=>{
-          b.addEventListener('click', ()=>{
-            document.querySelectorAll(`.btn[data-type="${attr}"]`).forEach(x=>x.classList.remove('btn--active'));
-            b.classList.add('btn--active');
-            options[attr] = b.dataset.value;
-          });
-        });
-      });
+      const generateBtn = $('#generate');
 
-      openBtn.addEventListener('click', ()=>{
-        window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
-      });
+      openBtn.addEventListener('click', ()=>{ window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer'); });
 
       generateBtn.addEventListener('click', async ()=>{
-        if(!ready(options)){
-          alert('Please select all required options: Grade, Subject, Board, Test Type, Question Types, and Language.');
+        if(!ready(S)){
+          alert('Please complete: Grade, Subject, Board, Test Type, at least one Question Type, and Language. (Follow-up fields are recommended.)');
           return;
         }
-        const prompt = buildPrompt(options);
+        const prompt = buildPrompt(S);
         promptOutput.value = prompt;
         resultBox.style.display = 'block';
         document.getElementById('ready-text').textContent = 'your prompt is Ready Now Paste it';