Create index.html

index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>UniSolve - Academic Assistant</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f5faff;
+      color: #002f5f;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      padding: 1rem 2rem;
+      background-color: #e0f0ff;
+      border-bottom: 1px solid #cce4ff;
+    }
+    header img {
+      height: 60px;
+      margin-right: 1rem;
+    }
+    header h1 {
+      font-size: 2rem;
+      margin: 0;
+    }
+    main {
+      padding: 2rem;
+      max-width: 900px;
+      margin: auto;
+    }
+    textarea, select {
+      width: 100%;
+      padding: 1rem;
+      margin-top: 0.5rem;
+      margin-bottom: 1.5rem;
+      border: 1px solid #c2defc;
+      border-radius: 10px;
+      font-size: 1rem;
+      background-color: #ffffff;
+      color: #002244;
+      box-shadow: 0 1px 3px rgba(0, 92, 192, 0.1);
+    }
+    button {
+      background-color: #0066cc;
+      color: white;
+      padding: 0.9rem 1.5rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      margin-right: 10px;
+      box-shadow: 0 2px 5px rgba(0, 92, 192, 0.2);
+      transition: background-color 0.3s ease;
+    }
+    button:hover {
+      background-color: #004e99;
+    }
+    label {
+      font-weight: bold;
+      display: block;
+      margin-top: 1rem;
+      color: #004080;
+    }
+    #outputBox {
+      white-space: pre-wrap;
+      margin-top: 2rem;
+      padding: 1.5rem;
+      background-color: #ffffff;
+      border: 1px solid #cce4ff;
+      border-radius: 10px;
+      box-shadow: 0 1px 4px rgba(0, 92, 192, 0.1);
+      color: #002244;
+    }
+    #loading {
+      margin-top: 1.5rem;
+      font-style: italic;
+      color: #0057a3;
+      animation: blink 1.2s infinite;
+    }
+    @keyframes blink {
+      0% {opacity: 1;}
+      50% {opacity: 0.3;}
+      100% {opacity: 1;}
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <img src="UniSolve-Emblem.PNG" alt="UniSolve Logo" />
+    <h1>UniSolve</h1>
+  </header>
+  <main>
+    <label for="category">Subject Category</label>
+    <select id="category">
+      <option>Arts, Humanities & Social Sciences</option>
+      <option>Law & Legal Studies</option>
+      <option>Business & Management</option>
+      <option>Psychology & Health Sciences</option>
+      <option>Media, Communication & Creative Arts</option>
+      <option>Education & Teaching</option>
+      <option>Indigenous & Global Studies</option>
+      <option>Social Work & Human Services</option>
+      <option>Criminology, Justice & Law Enforcement</option>
+      <option>Science & Technology</option>
+    </select>
+
+    <label for="citationStyle">Citation Style</label>
+    <select id="citationStyle">
+      <option>Harvard</option>
+      <option>APA 7th</option>
+      <option>AGLC</option>
+      <option>Chicago A (footnote)</option>
+      <option>Chicago B (author-date)</option>
+      <option>IEEE</option>
+      <option>MLA</option>
+      <option>AMA (Vancouver)</option>
+    </select>
+
+    <label for="caseStudy">Case Study</label>
+    <textarea id="caseStudy" rows="6" placeholder="Paste your case study here..."></textarea>
+
+    <label for="questions">Questions</label>
+    <textarea id="questions" rows="6" placeholder="Paste your assignment questions here..."></textarea>
+
+    <button onclick="generateResponse()">Generate Response</button>
+    <button onclick="downloadPDF()" id="pdfButton" style="display:none;">Download PDF</button>
+
+    <div id="loading"></div>
+    <div id="outputBox"></div>
+  </main>
+
+  <script>
+    async function generateResponse() {
+      const subject = document.getElementById("category").value;
+      const style = document.getElementById("citationStyle").value;
+      const caseStudy = document.getElementById("caseStudy").value;
+      const questions = document.getElementById("questions").value;
+      const button = document.querySelector("button");
+      const output = document.getElementById("outputBox");
+      const loading = document.getElementById("loading");
+      const pdfButton = document.getElementById("pdfButton");
+
+      // Clear previous content
+      output.innerText = "";
+      loading.innerText = "⏳ Generating your answer, please wait...";
+
+      button.disabled = true;
+
+      try {
+        const response = await fetch("/generate", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            case_study: caseStudy,
+            questions: questions,
+            category: subject,
+            citation: style
+          })
+        });
+
+        const result = await response.json();
+
+        if (result.answer) {
+          output.innerText = result.answer;
+          pdfButton.style.display = "inline-block";
+        } else {
+          output.innerText = `⚠️ Error: ${result.error}`;
+        }
+      } catch (err) {
+        output.innerText = `❌ Network error: ${err.message}`;
+      }
+
+      loading.innerText = "";
+      button.disabled = false;
+    }
+
+    function downloadPDF() {
+      const { jsPDF } = window.jspdf;
+      const doc = new jsPDF();
+      const content = document.getElementById("outputBox").innerText;
+      const lines = doc.splitTextToSize(content, 180);
+      doc.text(lines, 10, 20);
+      doc.save("unisolv_response.pdf");
+    }
+  </script>
+</body>
+</html>