Update index.html

index.html

@@ -6,37 +6,27 @@
   <title>Educational Assistant</title>
 
   <!-- Google Font -->
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"/>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
 
   <!-- Bootstrap 5 -->
-  <link
-    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-    integrity="sha384-c7DF2uX692G1LB+AU6CtQbmu6Ubfbdr6FLllSVEW9v56MZPPiBYkoQ7RZ2hFOTg1"
-    crossorigin="anonymous"
-  />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
 
   <!-- Animate.css -->
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-  />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 
   <!-- AOS -->
-  <link
-    href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
-    rel="stylesheet"
-  />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet" />
 
   <style>
-    /* ========== CSS VARIABLES ========== */
     :root {
-      --clr-primary: #6C63FF;
-      --clr-secondary: #FF6584;
-      --clr-bg: #F4F7FF;
-      --clr-card-bg: rgba(255, 255, 255, 0.65);
-      --clr-text: #333;
-      --transition: 0.3s ease-in-out;
+      --clr-primary: #6c63ff;
+      --clr-secondary: #ff6584;
+      --clr-bg: linear-gradient(135deg, #e0e7ff, #fef6ff);
+      --clr-card-bg: rgba(255, 255, 255, 0.7);
+      --clr-glass: rgba(255, 255, 255, 0.15);
+      --clr-border: rgba(255, 255, 255, 0.3);
+      --clr-text: #2d2d2d;
+      --transition: all 0.3s ease-in-out;
       --font: 'Poppins', sans-serif;
     }
 
@@ -48,164 +38,146 @@
       overflow-x: hidden;
     }
 
-    /* ===== HERO ===== */
-    .hero {
-      position: relative;
-      height: 300px;
-      background: linear-gradient(135deg, rgba(108,99,255,0.8), rgba(255,101,132,0.8)), 
-                  url('image.jpeg') center/cover no-repeat;
-    }
-    .hero h1 {
-      position: absolute;
-      bottom: 30px;
-      left: 30px;
-      font-size: 3rem;
-      color: #fff;
-      text-shadow: 0 3px 10px rgba(0,0,0,0.4);
-      margin: 0;
-    }
-
-    /* ===== NAVBAR ===== */
     .navbar {
-      background: #fff;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+      background: #ffffffdd;
+      backdrop-filter: blur(10px);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     }
+
     .navbar-brand {
       font-weight: 600;
       color: var(--clr-primary) !important;
+      font-size: 1.4rem;
     }
+
     .btn-outline-primary {
       border-color: var(--clr-primary);
       color: var(--clr-primary);
-      transition: var(--transition);
     }
+
     .btn-outline-primary:hover {
       background: var(--clr-primary);
-      color: #fff;
+      color: white;
     }
 
-    /* ===== OFFCANVAS ===== */
-    .offcanvas {
-      backdrop-filter: blur(4px);
-    }
-    .offcanvas-header {
-      border-bottom: 1px solid rgba(0,0,0,0.1);
+    .hero {
+      height: 300px;
+      background: linear-gradient(135deg, rgba(108, 99, 255, 0.7), rgba(255, 101, 132, 0.6)),
+                  url('image.jpeg') center/cover no-repeat;
+      position: relative;
     }
-    .offcanvas-body ol {
-      padding-left: 1rem;
+
+    .hero h1 {
+      position: absolute;
+      bottom: 30px;
+      left: 30px;
+      font-size: 3.5rem;
+      color: white;
+      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
 
-    /* ===== CARDS ===== */
     .card {
       background: var(--clr-card-bg);
-      backdrop-filter: blur(8px);
-      border: none;
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--clr-border);
       border-radius: 1rem;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
       transition: var(--transition);
     }
+
     .card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+      transform: translateY(-6px);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
     }
+
     .card-title {
-      font-weight: 600;
       color: var(--clr-primary);
+      font-weight: 600;
     }
 
-    /* ===== FORM ELEMENTS ===== */
     .form-control, .form-select {
       border-radius: 0.75rem;
-      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-      transition: var(--transition);
+      border: 1px solid #ddd;
     }
+
     .form-control:focus, .form-select:focus {
       border-color: var(--clr-primary);
-      box-shadow: 0 0 0 0.2rem rgba(108,99,255,0.25);
+      box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.25);
     }
 
-    /* ===== BUTTONS ===== */
     .btn-primary {
-      background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
+      background: linear-gradient(to right, var(--clr-primary), var(--clr-secondary));
       border: none;
       border-radius: 0.75rem;
       transition: var(--transition);
     }
+
     .btn-primary:hover {
       transform: scale(1.05);
-      box-shadow: 0 8px 20px rgba(108,99,255,0.3);
+      box-shadow: 0 8px 18px rgba(108, 99, 255, 0.3);
     }
+
     .btn-success {
       background: var(--clr-primary);
       border: none;
       border-radius: 0.75rem;
       transition: var(--transition);
     }
+
     .btn-success:hover {
       background: var(--clr-secondary);
       transform: translateY(-2px);
     }
 
-    /* ===== RESULT BOX ===== */
     #result {
-      background: #fff;
+      background: white;
       padding: 1rem;
       border-radius: 0.75rem;
-      min-height: 200px;
-      box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
+      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
       white-space: pre-wrap;
+      min-height: 200px;
     }
 
-    /* ===== SCROLLBAR ===== */
     ::-webkit-scrollbar {
       width: 8px;
     }
-    ::-webkit-scrollbar-track {
-      background: #f1f1f1;
-    }
+
     ::-webkit-scrollbar-thumb {
       background: var(--clr-primary);
       border-radius: 4px;
     }
+
+    .offcanvas {
+      backdrop-filter: blur(6px);
+    }
+
+    .offcanvas-header {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
   </style>
 </head>
 <body>
   <!-- NAVBAR -->
   <nav class="navbar navbar-light">
     <div class="container-fluid">
-      <button
-        class="btn btn-outline-primary"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#sidebar"
-        aria-controls="sidebar"
-      >
+      <button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
         ☰ Instructions
       </button>
       <span class="navbar-brand mb-0 h1">Educational Assistant</span>
     </div>
   </nav>
 
-  <!-- OFFCANVAS SIDEBAR -->
-  <div
-    class="offcanvas offcanvas-start"
-    tabindex="-1"
-    id="sidebar"
-    aria-labelledby="sidebarLabel"
-  >
+  <!-- OFFCANVAS -->
+  <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
     <div class="offcanvas-header">
       <h5 id="sidebarLabel">How to Use</h5>
-      <button
-        type="button"
-        class="btn-close"
-        data-bs-dismiss="offcanvas"
-        aria-label="Close"
-      ></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
     </div>
     <div class="offcanvas-body">
       <ol>
         <li>Enter your OpenAI API key.</li>
         <li>Upload a PDF file.</li>
-        <li>Select one of:
+        <li>Select one of the following:
           <ul>
             <li>Generate Summary</li>
             <li>Generate Quiz</li>
@@ -220,12 +192,14 @@
   </div>
 
   <!-- HERO -->
-  <section class="hero animate__animated animate__fadeIn"></section>
+  <section class="hero animate__animated animate__fadeIn">
+    <h1>Welcome to Your Study Buddy</h1>
+  </section>
 
   <!-- MAIN -->
   <div class="container my-5" data-aos="fade-up">
     <div class="row g-4">
-      <!-- CONTROLS -->
+      <!-- LEFT PANEL -->
       <div class="col-lg-4">
         <div class="card p-4">
           <div class="mb-3">
@@ -254,7 +228,8 @@
           </div>
         </div>
       </div>
-      <!-- OUTPUT -->
+
+      <!-- RIGHT PANEL -->
       <div class="col-lg-8">
         <div class="card p-4">
           <h5 class="card-title">Result</h5>
@@ -268,11 +243,7 @@
   </div>
 
   <!-- SCRIPTS -->
-  <script
-    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-E6mRv7/D+K0PtPpK0O1J3DRgIh+tp3loX3f7ogf20+RskmIOrthyxU2048gASBZd"
-    crossorigin="anonymous"
-  ></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
@@ -280,18 +251,13 @@
   <script>
     AOS.init();
     const pdfjsLib = window['pdfjs-dist/build/pdf'];
-    pdfjsLib.GlobalWorkerOptions.workerSrc =
-      'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
-
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
     let pdfText = '';
 
-    // Toggle question field
     document.getElementById('optionSelect').addEventListener('change', (e) => {
-      document.getElementById('questionGroup')
-        .classList.toggle('d-none', e.target.value !== 'Ask a Question');
+      document.getElementById('questionGroup').classList.toggle('d-none', e.target.value !== 'Ask a Question');
     });
 
-    // Load PDF text
     document.getElementById('pdfUpload').addEventListener('change', async (e) => {
       const file = e.target.files[0];
       if (!file) return;
@@ -301,13 +267,12 @@
       for (let i = 1; i <= pdf.numPages; i++) {
         const page = await pdf.getPage(i);
         const content = await page.getTextContent();
-        text += content.items.map((it) => it.str).join(' ') + '\\n\\n';
+        text += content.items.map((it) => it.str).join(' ') + '\n\n';
       }
       pdfText = text.trim();
       alert(`PDF loaded: ${pdf.numPages} pages`);
     });
 
-    // Generate & download
     document.getElementById('generateBtn').addEventListener('click', async () => {
       const key = document.getElementById('apiKey').value.trim();
       if (!key) return alert('Please enter your OpenAI API key.');
@@ -323,14 +288,14 @@
         sys = 'You are a smart assistant. Answer the user’s question based on the PDF.';
         const q = document.getElementById('questionInput').value.trim();
         if (!q) return alert('Please type your question.');
-        user += '\\n\\nUser question: ' + q;
+        user += '\n\nUser question: ' + q;
       } else {
         sys = 'You are a smart assistant. Generate a balanced 7-day study plan dividing PDF content into 7 topics.';
       }
 
-      // Call OpenAI
       const resDiv = document.getElementById('result');
       resDiv.textContent = 'Generating…';
+
       const resp = await fetch('https://api.openai.com/v1/chat/completions', {
         method: 'POST',
         headers: {
@@ -349,7 +314,6 @@
       const text = data.choices[0].message.content.trim();
       resDiv.textContent = text;
 
-      // Prepare PDF
       const { jsPDF } = window.jspdf;
       const doc = new jsPDF();
       const lines = doc.splitTextToSize(text, 180);