Delete frontend directory

frontend/README.md

@@ -1,36 +0,0 @@
-# Frontend (Multi-Page Flow)
-
-This frontend now uses a strict page flow:
-
-1. `index.html` -> Login/Signup
-2. `upload.html` -> Upload document and run analysis
-3. `issues.html` -> Line-level issue page (duplication, inconsistency, contradiction)
-4. `summary.html` -> Final full-document summary
-
-## Run
-
-Serve this folder using any static server from `frontend/`:
-
-```bash
-python -m http.server 8080
-```
-
-Open:
-
-- `http://127.0.0.1:8080/index.html`
-
-## Backend dependency
-
-Frontend expects Flask backend endpoints:
-
-- `POST /api/register`
-- `POST /api/login`
-- `POST /api/analyze`
-
-Fallback aliases are also supported in client code (`/register`, `/login`, `/analyze`) across ports `5000` and `5001`.
-
-## Notes
-
-- Login state and analysis payload are stored in `sessionStorage`.
-- If user session is missing, `upload.html`, `issues.html`, and `summary.html` redirect to `index.html`.
-- If analysis payload is missing, `issues.html` and `summary.html` redirect to `upload.html`.

frontend/app.js

@@ -1,509 +0,0 @@
-const currentHost = window.location.hostname || "127.0.0.1";
-
-const API_BASES = [
-  `http://${currentHost}:5000/api`,
-  `http://${currentHost}:5001/api`,
-  "http://127.0.0.1:5000/api",
-  "http://localhost:5000/api",
-  "http://127.0.0.1:5001/api",
-  "http://localhost:5001/api",
-];
-
-const ANALYZE_URLS = [
-  `http://${currentHost}:5000/api/analyze`,
-  `http://${currentHost}:5000/analyze`,
-  `http://${currentHost}:5001/api/analyze`,
-  `http://${currentHost}:5001/analyze`,
-  "http://127.0.0.1:5000/api/analyze",
-  "http://127.0.0.1:5000/analyze",
-  "http://localhost:5000/api/analyze",
-  "http://localhost:5000/analyze",
-  "http://127.0.0.1:5001/api/analyze",
-  "http://127.0.0.1:5001/analyze",
-  "http://localhost:5001/api/analyze",
-  "http://localhost:5001/analyze",
-];
-
-const page = (window.location.pathname.split("/").pop() || "index.html").toLowerCase();
-
-function escapeHtml(value) {
-  return String(value)
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#039;");
-}
-
-function setText(el, text, type = null) {
-  if (!el) return;
-  el.textContent = text;
-  el.classList.remove("success", "error");
-  if (type) el.classList.add(type);
-}
-
-function getUser() {
-  const userRaw = sessionStorage.getItem("lsi_user");
-  if (!userRaw) return null;
-  try {
-    return JSON.parse(userRaw);
-  } catch {
-    return null;
-  }
-}
-
-function setUser(user) {
-  sessionStorage.setItem("lsi_user", JSON.stringify(user));
-}
-
-function clearSession() {
-  sessionStorage.removeItem("lsi_user");
-  sessionStorage.removeItem("lsi_analysis_payload");
-}
-
-function getAnalysisPayload() {
-  const raw = sessionStorage.getItem("lsi_analysis_payload");
-  if (!raw) return null;
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return null;
-  }
-}
-
-function setAnalysisPayload(payload) {
-  sessionStorage.setItem("lsi_analysis_payload", JSON.stringify(payload));
-}
-
-function ensureAuth() {
-  const user = getUser();
-  if (!user) {
-    window.location.href = "index.html#home";
-    return null;
-  }
-
-  const badge = document.getElementById("userBadge");
-  if (badge) {
-    badge.textContent = `${user.fullName || user.email || "User"}`;
-  }
-
-  const logoutBtn = document.getElementById("logoutBtn");
-  if (logoutBtn) {
-    logoutBtn.addEventListener("click", () => {
-      clearSession();
-      window.location.href = "index.html#home";
-    });
-  }
-
-  return user;
-}
-
-async function postAuth(endpoint, payload) {
-  let response = null;
-  let data = null;
-  let lastNetworkError = null;
-
-  for (const base of API_BASES) {
-    try {
-      response = await fetch(`${base}${endpoint}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
-      });
-      data = await response.json().catch(() => null);
-      lastNetworkError = null;
-      break;
-    } catch (error) {
-      lastNetworkError = error;
-    }
-  }
-
-  if (lastNetworkError) {
-    throw new Error(`Cannot reach backend at ${API_BASES.join(", ")}.`);
-  }
-
-  return { response, data };
-}
-
-async function runDocumentAnalysis(formData) {
-  let response = null;
-  let data = null;
-  let lastNetworkError = null;
-  let status = null;
-
-  for (const url of ANALYZE_URLS) {
-    try {
-      response = await fetch(url, { method: "POST", body: formData });
-      data = await response.json().catch(() => null);
-      status = response.status;
-      lastNetworkError = null;
-      if (response.status !== 404) break;
-    } catch (error) {
-      lastNetworkError = error;
-    }
-  }
-
-  if (lastNetworkError) {
-    throw new Error("Cannot connect to backend for analysis.");
-  }
-
-  if (!response.ok) {
-    throw new Error(data?.error || `Analysis request failed with HTTP ${status || response.status}.`);
-  }
-
-  return data;
-}
-
-function buildIssueRows(lineIssues, category) {
-  const rows = lineIssues
-    .filter((item) => item.category === category)
-    .slice(0, 80)
-    .map(
-      (item) => `
-      <tr>
-        <td>${escapeHtml(item.location || `Pg ${item.page}, Ln ${item.line}`)}</td>
-        <td>${escapeHtml(item.issueType || "-")}</td>
-        <td>${escapeHtml(item.confidence ?? "-")}</td>
-      </tr>
-    `
-    )
-    .join("");
-
-  if (!rows) {
-    return `<p class="result-muted">No ${category} lines detected.</p>`;
-  }
-
-  return `
-    <div class="table-wrap">
-      <table class="result-table">
-        <thead>
-          <tr>
-            <th>Page/Line</th>
-            <th>Issue Type</th>
-            <th>Confidence</th>
-          </tr>
-        </thead>
-        <tbody>${rows}</tbody>
-      </table>
-    </div>
-  `;
-}
-
-function initIndexPage() {
-  const loginTab = document.getElementById("loginTab");
-  const signupTab = document.getElementById("signupTab");
-  const authForm = document.getElementById("authForm");
-  const nameField = document.getElementById("nameField");
-  const fullNameInput = document.getElementById("fullName");
-  const emailInput = document.getElementById("email");
-  const passwordInput = document.getElementById("password");
-  const submitBtn = document.getElementById("submitBtn");
-  const formSubtitle = document.getElementById("formSubtitle");
-  const message = document.getElementById("message");
-
-  let mode = "login";
-
-  function setMode(nextMode) {
-    mode = nextMode;
-    const isSignup = mode === "signup";
-    signupTab.classList.toggle("active", isSignup);
-    loginTab.classList.toggle("active", !isSignup);
-    nameField.classList.toggle("hidden", !isSignup);
-    submitBtn.textContent = isSignup ? "Create Account" : "Login";
-    formSubtitle.textContent = isSignup
-      ? "Create your account to start securely."
-      : "Enter your credentials to access your account.";
-    fullNameInput.required = isSignup;
-    setText(message, "", null);
-  }
-
-  async function handleAuthSubmit(event) {
-    event.preventDefault();
-    setText(message, "", null);
-
-    const email = emailInput.value.trim();
-    const password = passwordInput.value;
-    const fullName = fullNameInput.value.trim();
-
-    if (!email || !password || (mode === "signup" && !fullName)) {
-      setText(message, "Please fill all required fields.", "error");
-      return;
-    }
-
-    submitBtn.disabled = true;
-
-    try {
-      const endpoint = mode === "signup" ? "/register" : "/login";
-      const payload = mode === "signup" ? { fullName, email, password } : { email, password };
-      const { response, data } = await postAuth(endpoint, payload);
-
-      if (!response.ok) {
-        throw new Error(data?.error || `Request failed with HTTP ${response.status}.`);
-      }
-
-      if (mode === "signup") {
-        setText(message, "Account created. Please login now.", "success");
-        authForm.reset();
-        setMode("login");
-        return;
-      }
-
-      const user = data?.user || { fullName: fullName || email, email };
-      setUser(user);
-      window.location.href = "upload.html";
-    } catch (error) {
-      setText(message, error.message || "Something went wrong.", "error");
-    } finally {
-      submitBtn.disabled = false;
-    }
-  }
-
-  loginTab.addEventListener("click", () => setMode("login"));
-  signupTab.addEventListener("click", () => setMode("signup"));
-  authForm.addEventListener("submit", handleAuthSubmit);
-  setMode("login");
-
-  if (getUser()) {
-    window.location.href = "upload.html";
-  }
-}
-
-function initUploadPage() {
-  if (!ensureAuth()) return;
-
-  const uploadForm = document.getElementById("uploadForm");
-  const legalFile = document.getElementById("legalFile");
-  const scanMode = document.getElementById("scanMode");
-  const uploadMessage = document.getElementById("uploadMessage");
-  const loadingState = document.getElementById("loadingState");
-  const analysisInputSummary = document.getElementById("analysisInputSummary");
-
-  legalFile.addEventListener("change", () => {
-    if (!legalFile.files || !legalFile.files[0]) return;
-    const selectedFile = legalFile.files[0];
-    analysisInputSummary.classList.remove("hidden");
-    analysisInputSummary.innerHTML = `
-      <p><strong>File:</strong> ${escapeHtml(selectedFile.name)}</p>
-      <p><strong>Type:</strong> ${escapeHtml(selectedFile.type || "unknown")}</p>
-      <p><strong>Size:</strong> ${escapeHtml((selectedFile.size / 1024).toFixed(2))} KB</p>
-      <p><strong>Scan Mode:</strong> ${escapeHtml(scanMode.value)}</p>
-    `;
-    setText(uploadMessage, `Selected: ${selectedFile.name}`, "success");
-  });
-
-  uploadForm.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    setText(uploadMessage, "", null);
-
-    if (!legalFile.files || legalFile.files.length === 0) {
-      setText(uploadMessage, "Please choose a file to continue.", "error");
-      return;
-    }
-
-    const selectedFile = legalFile.files[0];
-    const selectedScanMode = scanMode.value;
-
-    const formData = new FormData();
-    formData.append("file", selectedFile);
-    formData.append("scanMode", selectedScanMode);
-
-    uploadForm.classList.add("hidden");
-    loadingState.classList.remove("hidden");
-
-    try {
-      const payload = await runDocumentAnalysis(formData);
-      payload._meta = {
-        fileName: selectedFile.name,
-        fileType: selectedFile.type || "unknown",
-        fileSizeKb: Number((selectedFile.size / 1024).toFixed(2)),
-      };
-      setAnalysisPayload(payload);
-      window.location.href = "issues.html";
-    } catch (error) {
-      loadingState.classList.add("hidden");
-      uploadForm.classList.remove("hidden");
-      setText(uploadMessage, error.message || "Analysis failed.", "error");
-    }
-  });
-}
-
-function initIssuesPage() {
-  if (!ensureAuth()) return;
-
-  const payload = getAnalysisPayload();
-  if (!payload) {
-    window.location.href = "upload.html";
-    return;
-  }
-
-  const summary = payload.summary || {};
-  const lineIssues = Array.isArray(payload.lineIssues) ? payload.lineIssues : [];
-
-  const issueStats = document.getElementById("issueStats");
-  issueStats.innerHTML = `
-    <article class="stat-card stat-dup">
-      <h3>Duplication</h3>
-      <p>${escapeHtml(summary.duplicationCount ?? 0)}</p>
-    </article>
-    <article class="stat-card stat-inc">
-      <h3>Inconsistency</h3>
-      <p>${escapeHtml(summary.inconsistencyCount ?? 0)}</p>
-    </article>
-    <article class="stat-card stat-con">
-      <h3>Contradiction</h3>
-      <p>${escapeHtml(summary.contradictionCount ?? 0)}</p>
-    </article>
-  `;
-
-  const lineIssueTables = document.getElementById("lineIssueTables");
-  lineIssueTables.innerHTML = `
-    <section class="result-card">
-      <h4>Duplication Lines</h4>
-      ${buildIssueRows(lineIssues, "duplication")}
-    </section>
-    <section class="result-card">
-      <h4>Inconsistency Lines</h4>
-      ${buildIssueRows(lineIssues, "inconsistency")}
-    </section>
-    <section class="result-card">
-      <h4>Contradiction Lines</h4>
-      ${buildIssueRows(lineIssues, "contradiction")}
-    </section>
-  `;
-}
-
-function initSummaryPage() {
-  if (!ensureAuth()) return;
-
-  const payload = getAnalysisPayload();
-  if (!payload) {
-    window.location.href = "upload.html";
-    return;
-  }
-
-  const summary = payload.summary || {};
-  const findings = Array.isArray(payload.findings) ? payload.findings : [];
-  const pageSummaries = Array.isArray(payload.pageSummaries) ? payload.pageSummaries : [];
-  const lineIssues = Array.isArray(payload.lineIssues) ? payload.lineIssues : [];
-  const detailedSummary = String(payload.detailedSummary || "").trim();
-  const meta = payload._meta || {};
-
-  const summaryDetails = document.getElementById("summaryDetails");
-  summaryDetails.innerHTML = `
-    <article class="summary-item"><span>File</span><strong>${escapeHtml(meta.fileName || "-")}</strong></article>
-    <article class="summary-item"><span>Scan Mode</span><strong>${escapeHtml(summary.scanMode || "-")}</strong></article>
-    <article class="summary-item"><span>Threshold</span><strong>${escapeHtml(summary.threshold ?? "-")}</strong></article>
-    <article class="summary-item"><span>Vendor</span><strong>${escapeHtml(summary.vendor || "Not found")}</strong></article>
-    <article class="summary-item"><span>Vendee</span><strong>${escapeHtml(summary.vendee || "Not found")}</strong></article>
-    <article class="summary-item"><span>Clauses</span><strong>${escapeHtml(summary.clauses ?? 0)}</strong></article>
-    <article class="summary-item"><span>Pairs Compared</span><strong>${escapeHtml(summary.pairsCompared ?? 0)}</strong></article>
-    <article class="summary-item"><span>Total Issues</span><strong>${escapeHtml(summary.issuesFound ?? 0)}</strong></article>
-  `;
-
-  const findingsBoard = document.getElementById("findingsBoard");
-  const pageSummaryBoard = document.getElementById("pageSummaryBoard");
-  const detailedSummaryText = document.getElementById("detailedSummaryText");
-  const lineErrorDashboard = document.getElementById("lineErrorDashboard");
-
-  if (detailedSummaryText) {
-    detailedSummaryText.textContent = detailedSummary || "Detailed summary is not available for this document.";
-  }
-
-  if (pageSummaryBoard) {
-    if (pageSummaries.length === 0) {
-      pageSummaryBoard.innerHTML =
-        `<article class="result-card"><p class="result-muted">No page-wise summary available for this document.</p></article>`;
-    } else {
-      pageSummaryBoard.innerHTML = pageSummaries
-        .map((item) => {
-          const keyLines = Array.isArray(item.keyLines) ? item.keyLines : [];
-          const keyLineHtml = keyLines.length
-            ? keyLines.map((k) => `<li>${escapeHtml(k)}</li>`).join("")
-            : "<li>No flagged lines on this page.</li>";
-          return `
-          <article class="result-card">
-            <h4>Page ${escapeHtml(item.page)}</h4>
-            <p><strong>Clauses:</strong> ${escapeHtml(item.clauseCount ?? 0)}</p>
-            <p><strong>Issues:</strong> ${escapeHtml(item.issueCount ?? 0)} (Duplication: ${escapeHtml(item.duplicationCount ?? 0)}, Inconsistency: ${escapeHtml(item.inconsistencyCount ?? 0)}, Contradiction: ${escapeHtml(item.contradictionCount ?? 0)})</p>
-            <p><strong>Page Snippet:</strong> ${escapeHtml(item.pageSnippet || "-")}</p>
-            <p><strong>Summary:</strong> ${escapeHtml(item.summaryText || "-")}</p>
-            <p><strong>Key Lines:</strong></p>
-            <ul>${keyLineHtml}</ul>
-          </article>
-        `;
-        })
-        .join("");
-    }
-  }
-
-  if (findings.length === 0) {
-    findingsBoard.innerHTML = `<article class="result-card"><p class="result-muted">No major findings detected for this document.</p></article>`;
-    return;
-  }
-
-  const topFindings = findings.slice(0, 20);
-  findingsBoard.innerHTML = topFindings
-    .map(
-      (item) => `
-      <article class="result-card">
-        <h4>${escapeHtml(item.category || "issue")} - ${escapeHtml(item.issueType || "-")}</h4>
-        <p><strong>Confidence:</strong> ${escapeHtml(item.confidence ?? "-")}</p>
-        <p><strong>Location A:</strong> ${escapeHtml(item.location1 || "-")}</p>
-        <p><strong>Location B:</strong> ${escapeHtml(item.location2 || "-")}</p>
-        <p><strong>Reason:</strong> ${escapeHtml(item.reason || "-")}</p>
-      </article>
-    `
-    )
-    .join("");
-
-  if (lineErrorDashboard) {
-    if (lineIssues.length === 0) {
-      lineErrorDashboard.innerHTML = `<p class="result-muted">No line-level errors detected.</p>`;
-      return;
-    }
-
-    const rows = lineIssues
-      .slice(0, 200)
-      .map(
-        (item) => `
-        <tr>
-          <td>${escapeHtml(item.location || `Pg ${item.page}, Ln ${item.line}`)}</td>
-          <td>${escapeHtml(item.category || "-")}</td>
-          <td>${escapeHtml(item.issueType || "-")}</td>
-          <td>${escapeHtml(item.confidence ?? "-")}</td>
-          <td>${escapeHtml(item.reason || "-")}</td>
-        </tr>
-      `
-      )
-      .join("");
-
-    lineErrorDashboard.innerHTML = `
-      <div class="table-wrap">
-        <table class="result-table">
-          <thead>
-            <tr>
-              <th>Page/Line</th>
-              <th>Category</th>
-              <th>Issue Type</th>
-              <th>Confidence</th>
-              <th>Reason</th>
-            </tr>
-          </thead>
-          <tbody>${rows}</tbody>
-        </table>
-      </div>
-    `;
-  }
-}
-
-if (page === "index.html" || page === "") {
-  initIndexPage();
-} else if (page === "upload.html") {
-  initUploadPage();
-} else if (page === "issues.html") {
-  initIssuesPage();
-} else if (page === "summary.html") {
-  initSummaryPage();
-} else if (page === "workflow.html") {
-  window.location.href = "upload.html";
-}

frontend/index.html

@@ -1,226 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Semantix • Legal Semantic Intelligence</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <style>
-      :root {
-        --navy: #0f172a;
-      }
-
-      .tail-container {
-        font-family: "Inter", system-ui, sans-serif;
-      }
-
-      .heading-font {
-        font-family: "Space Grotesk", sans-serif;
-      }
-
-      .hero-bg {
-        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-      }
-
-      .card {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      .card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
-      }
-
-      .document-3d {
-        perspective: 1200px;
-        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
-      }
-
-      .document-3d:hover {
-        transform: rotateX(12deg) rotateY(12deg) scale(1.03);
-      }
-
-      .document-inner {
-        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4), 0 0 80px -20px rgb(129 140 248 / 0.6), inset 0 4px 12px rgba(255, 255, 255, 0.3);
-      }
-
-      .scan-line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 4px;
-        background: linear-gradient(90deg, transparent, #a5b4fc, transparent);
-        animation: scan 4s linear infinite;
-        opacity: 0.6;
-      }
-
-      .switcher button.active {
-        background: #ffffff;
-        color: #111827;
-        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
-      }
-
-      @keyframes scan {
-        0% {
-          transform: translateY(-100%);
-        }
-
-        100% {
-          transform: translateY(380px);
-        }
-      }
-
-      @media (max-width: 768px) {
-        .nav-mobile-hide {
-          display: none;
-        }
-      }
-    </style>
-  </head>
-  <body class="tail-container bg-zinc-50 text-slate-900">
-    <header class="bg-white border-b border-slate-200 sticky top-0 z-50">
-      <div class="max-w-7xl mx-auto px-6 md:px-8 py-5 flex items-center justify-between gap-4">
-        <div class="flex items-center gap-x-3">
-          <div class="w-9 h-9 bg-gradient-to-br from-indigo-600 to-violet-600 rounded-2xl flex items-center justify-center text-white font-bold text-2xl leading-none pt-0.5">S</div>
-          <a href="#home" class="heading-font text-3xl font-semibold tracking-tighter text-slate-900">Semantix</a>
-        </div>
-
-        <nav class="nav-mobile-hide md:flex items-center gap-x-10 text-sm font-medium">
-          <a href="#home" class="hover:text-indigo-600 transition-colors">Home</a>
-          <a href="#about" class="hover:text-indigo-600 transition-colors">About</a>
-          <a href="#service" class="hover:text-indigo-600 transition-colors">Service</a>
-          <a href="#contact" class="hover:text-indigo-600 transition-colors">Contact</a>
-        </nav>
-
-        <a href="#authView" class="px-5 py-2.5 text-sm font-semibold bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl transition-colors">Get Started</a>
-      </div>
-    </header>
-
-    <main>
-      <section id="home" class="hero-bg min-h-screen flex items-center relative overflow-hidden">
-        <div class="absolute inset-0 bg-[radial-gradient(at_50%_30%,rgba(129,140,248,0.15),transparent)]"></div>
-
-        <div class="max-w-7xl mx-auto px-6 md:px-8 grid md:grid-cols-12 gap-14 items-center relative z-10 py-16">
-          <div class="md:col-span-7">
-            <div class="inline-flex items-center gap-x-2 bg-white/10 backdrop-blur-md border border-white/20 text-white text-xs font-medium px-4 py-2 rounded-3xl mb-6">
-              <span class="relative flex h-3 w-3">
-                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
-              </span>
-              AI LEGAL INTELLIGENCE
-            </div>
-
-            <h1 class="heading-font text-5xl md:text-7xl leading-none font-semibold tracking-tighter text-white max-w-2xl">
-              Legal Documents,<br />Deeply Understood
-            </h1>
-
-            <p class="mt-8 text-lg md:text-xl text-slate-300 max-w-xl">
-              Advanced semantic analysis that uncovers hidden risks and delivers crystal-clear clarity in every contract.
-            </p>
-
-            <div class="mt-12 flex justify-center md:justify-start">
-              <div class="document-3d relative inline-block">
-                <div class="document-inner w-[300px] md:w-[320px] h-[360px] md:h-[380px] bg-white rounded-3xl overflow-hidden border border-white/40 relative">
-                  <div class="h-12 bg-gradient-to-r from-indigo-600 to-violet-600 flex items-center px-6 text-white text-sm font-medium">
-                    CONTRACT • PAGE 1
-                  </div>
-
-                  <div class="p-6 space-y-3 text-[10px] leading-tight text-slate-700 font-mono">
-                    <div class="h-2.5 bg-slate-200 rounded w-3/4"></div>
-                    <div class="h-2.5 bg-slate-200 rounded w-11/12"></div>
-                    <div class="h-2.5 bg-slate-200 rounded w-5/6"></div>
-                    <div class="h-2.5 bg-slate-200 rounded w-full"></div>
-                    <div class="h-2.5 bg-slate-200 rounded w-3/4"></div>
-                    <div class="h-2.5 bg-slate-200 rounded w-10/12"></div>
-                  </div>
-
-                  <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/10 to-violet-400/10 flex items-center justify-center">
-                    <i class="fa-solid fa-wand-magic-sparkles text-white text-[120px] opacity-30"></i>
-                  </div>
-                  <div class="scan-line"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="md:col-span-5">
-            <section id="authView" class="bg-white rounded-3xl shadow-2xl p-8 md:p-10 card">
-              <div class="form-header mb-8">
-                <div class="switcher grid grid-cols-2 bg-slate-100 p-1 rounded-2xl mb-3" role="tablist" aria-label="Auth mode">
-                  <button id="loginTab" class="active px-7 py-3 text-sm font-semibold rounded-[14px]" type="button">Login</button>
-                  <button id="signupTab" class="px-7 py-3 text-sm font-semibold rounded-[14px]" type="button">Sign Up</button>
-                </div>
-                <p id="formSubtitle" class="text-slate-500 text-sm">Enter your credentials to access your account.</p>
-              </div>
-
-              <form id="authForm" class="space-y-5" novalidate>
-                <div id="nameField" class="hidden">
-                  <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="fullName">Full Name</label>
-                  <input id="fullName" name="fullName" type="text" placeholder="Jayasree" class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" />
-                </div>
-                <div>
-                  <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="email">Email</label>
-                  <input id="email" name="email" type="email" placeholder="you@lawfirm.in" autocomplete="email" required class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" />
-                </div>
-                <div>
-                  <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="password">Password</label>
-                  <input id="password" name="password" type="password" placeholder="Minimum 6 characters" autocomplete="current-password" required class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" />
-                </div>
-                <button id="submitBtn" type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 transition-colors text-white font-semibold py-4 rounded-3xl">Login</button>
-              </form>
-              <p id="message" class="text-center text-sm mt-6 text-slate-500"></p>
-            </section>
-          </div>
-        </div>
-      </section>
-
-      <section id="about" class="py-20 bg-white">
-        <div class="max-w-4xl mx-auto px-8 text-center">
-          <h2 class="heading-font text-4xl md:text-5xl font-semibold tracking-tighter mb-6">Reliable. Precise. Intelligent.</h2>
-          <p class="text-lg text-slate-600 max-w-2xl mx-auto">
-            Semantix delivers clear, accurate semantic analysis of legal documents, helping you catch issues instantly and work with confidence.
-          </p>
-        </div>
-      </section>
-
-      <section id="service" class="py-24 bg-slate-50">
-        <div class="max-w-7xl mx-auto px-8">
-          <h2 class="heading-font text-center text-4xl md:text-5xl font-semibold tracking-tighter mb-16">Built for serious legal work</h2>
-          <div class="grid md:grid-cols-3 gap-8">
-            <div class="bg-white p-10 rounded-3xl card text-center">
-              <div class="text-5xl mb-6">🔐</div>
-              <h3 class="font-semibold text-xl">Enterprise Security</h3>
-              <p class="text-slate-500 mt-3">Your documents stay private and protected.</p>
-            </div>
-            <div class="bg-white p-10 rounded-3xl card text-center">
-              <div class="text-5xl mb-6">🧠</div>
-              <h3 class="font-semibold text-xl">Smart Analysis</h3>
-              <p class="text-slate-500 mt-3">Understands legal language like a senior counsel.</p>
-            </div>
-            <div class="bg-white p-10 rounded-3xl card text-center">
-              <div class="text-5xl mb-6">📈</div>
-              <h3 class="font-semibold text-xl">Instant Insights</h3>
-              <p class="text-slate-500 mt-3">Visual dashboard with line-level clarity.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="contact" class="py-20 bg-slate-900 text-white text-center">
-        <div class="max-w-7xl mx-auto px-8">
-          <p class="text-sm uppercase tracking-widest text-slate-400">Made for legal professionals</p>
-          <h2 class="heading-font text-4xl mt-4">Ready for flawless contracts?</h2>
-          <a href="mailto:hello@semantix.ai" class="inline-block mt-10 px-10 py-4 bg-white text-slate-900 font-semibold rounded-3xl hover:bg-indigo-50 transition-colors">Contact Us</a>
-          <p class="mt-20 text-xs text-slate-500">© 2026 Semantix • Legal Semantic Intelligence</p>
-        </div>
-      </section>
-    </main>
-
-    <script src="app.js"></script>
-  </body>
-</html>

frontend/issues.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Issue Analysis | LegalSI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <header class="topbar">
-      <div class="container topbar-inner">
-        <a class="brand" href="index.html#home">LegalSI</a>
-        <div class="page-links">
-          <a class="page-link" href="upload.html">Upload</a>
-          <a class="page-link active" href="issues.html">Issue Analysis</a>
-          <a class="page-link" href="summary.html">Final Summary</a>
-          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
-        </div>
-      </div>
-    </header>
-
-    <main class="flow-main">
-      <section class="container flow-card">
-        <div class="upload-header">
-          <h1>Line-Level Issue Analysis</h1>
-          <span id="userBadge" class="user-badge"></span>
-        </div>
-        <p class="upload-subtitle">Inconsistencies, contradictions, and duplications with page and line references.</p>
-
-        <div id="issueStats" class="stats-grid"></div>
-        <div id="lineIssueTables"></div>
-
-        <div class="workflow-actions">
-          <a class="secondary-btn as-link" href="upload.html">Back to Upload</a>
-          <a class="submit-btn as-link submit-link" href="summary.html">Next: Final Summary</a>
-        </div>
-      </section>
-    </main>
-
-    <script src="app.js"></script>
-  </body>
-</html>

frontend/styles.css

@@ -1,957 +0,0 @@
-:root {
-  --bg: #f3f5f8;
-  --surface: #ffffff;
-  --surface-soft: #f8fafc;
-  --ink: #0e2238;
-  --muted: #5b6f85;
-  --border: #d3dee9;
-  --navy: #12385f;
-  --navy-2: #1f4d79;
-  --gold: #b78a28;
-  --primary: #1f5fa6;
-  --primary-2: #2e79c8;
-  --teal: #1f8a75;
-  --danger: #b93f4f;
-  --ok: #166a47;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  margin: 0;
-  font-family: "Manrope", sans-serif;
-  color: var(--ink);
-  background:
-    radial-gradient(1000px 450px at -10% -8%, #dfe9f5 0%, rgba(223, 233, 245, 0) 60%),
-    radial-gradient(900px 420px at 110% -10%, #ece5d5 0%, rgba(236, 229, 213, 0) 58%),
-    linear-gradient(180deg, #eff3f7 0%, #f8fafd 42%, #ffffff 100%);
-  line-height: 1.45;
-}
-
-.container {
-  width: min(1180px, 92%);
-  margin: 0 auto;
-}
-
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  background: rgba(249, 251, 253, 0.94);
-  backdrop-filter: blur(6px);
-  border-bottom: 1px solid #cfd9e4;
-  box-shadow: 0 4px 18px rgba(14, 34, 56, 0.06);
-}
-
-.topbar-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 68px;
-}
-
-.brand {
-  font-family: "Space Grotesk", sans-serif;
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--navy);
-  text-decoration: none;
-}
-
-.nav-links {
-  display: flex;
-  gap: 20px;
-}
-
-.nav-links a {
-  color: #264868;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 14px;
-  padding: 6px 8px;
-  border-radius: 8px;
-}
-
-.nav-links a:hover {
-  background: #e9f0f8;
-  color: var(--navy);
-}
-
-.hero {
-  position: relative;
-  padding: 48px 0 42px;
-  overflow: hidden;
-}
-
-.hero-bg {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(120deg, rgba(18, 56, 95, 0.1), rgba(183, 138, 40, 0.09)),
-    url("assets/legal-tech-bg.svg") right center / cover no-repeat;
-  opacity: 0.95;
-  pointer-events: none;
-}
-
-.hero-grid {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1.1fr 0.95fr;
-  gap: 24px;
-  align-items: start;
-}
-
-.hero-copy {
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 24px;
-  box-shadow: 0 14px 34px rgba(15, 38, 66, 0.11);
-  animation: fadeInUp 0.45s ease-out;
-}
-
-.eyebrow {
-  margin: 0 0 10px;
-  font-size: 13px;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--navy-2);
-  font-weight: 800;
-}
-
-.hero-copy h1 {
-  margin: 0;
-  font-size: clamp(30px, 4.6vw, 50px);
-  line-height: 1.08;
-  font-family: "Space Grotesk", sans-serif;
-}
-
-.hero-text {
-  margin: 14px 0 18px;
-  color: var(--muted);
-  line-height: 1.6;
-  max-width: 66ch;
-}
-
-.hero-cta-row {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin: 8px 0 14px;
-}
-
-.hero-cta-primary,
-.hero-cta-secondary {
-  text-decoration: none;
-  border-radius: 11px;
-  font-size: 14px;
-  font-weight: 800;
-  padding: 10px 14px;
-}
-
-.hero-cta-primary {
-  color: #ffffff;
-  background: linear-gradient(92deg, var(--navy), var(--primary-2) 58%, var(--teal));
-  box-shadow: 0 10px 18px rgba(17, 62, 110, 0.22);
-}
-
-.hero-cta-secondary {
-  color: #1c446b;
-  background: #ecf4ff;
-  border: 1px solid #bfd6f2;
-}
-
-.trust-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 0 0 14px;
-}
-
-.trust-strip span {
-  border: 1px solid #d0dded;
-  border-radius: 999px;
-  padding: 5px 10px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #315579;
-  background: #f5f9ff;
-}
-
-.hero-metrics {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-
-.hero-metrics > div {
-  border: 1px solid #d5e2f0;
-  background: #ffffff;
-  border-radius: 12px;
-  padding: 12px;
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
-}
-
-.hero-metrics > div:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 18px rgba(16, 43, 74, 0.09);
-}
-
-.hero-metrics h3 {
-  margin: 0;
-  font-size: 14px;
-}
-
-.hero-metrics p {
-  margin: 6px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.preview-card {
-  margin-top: 12px;
-  border: 1px solid #ccdaea;
-  border-radius: 14px;
-  padding: 12px;
-  background: linear-gradient(160deg, #f7fbff 0%, #edf5ff 100%);
-}
-
-.preview-card h3 {
-  margin: 0 0 10px;
-  font-size: 14px;
-  color: #163a60;
-}
-
-.preview-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
-}
-
-.preview-grid div {
-  border: 1px solid #c8d9ec;
-  border-radius: 10px;
-  background: #ffffff;
-  padding: 8px;
-  display: grid;
-  gap: 3px;
-}
-
-.preview-grid span {
-  font-size: 11px;
-  color: #5a7090;
-}
-
-.preview-grid strong {
-  font-size: 19px;
-  color: #15395e;
-}
-
-.panel {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  box-shadow: 0 14px 30px rgba(12, 31, 53, 0.12);
-  animation: fadeInUp 0.5s ease-out;
-}
-
-.auth-panel {
-  padding: 22px;
-}
-
-.form-header {
-  margin-bottom: 18px;
-}
-
-.switcher {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  background: #e9eff7;
-  border-radius: 12px;
-  padding: 4px;
-  margin-bottom: 12px;
-}
-
-.switcher button {
-  border: 0;
-  background: transparent;
-  border-radius: 9px;
-  padding: 10px;
-  font-weight: 800;
-  cursor: pointer;
-  color: #315579;
-  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
-}
-
-.switcher button.active {
-  color: #112a48;
-  background: #ffffff;
-  box-shadow: 0 6px 14px rgba(8, 26, 49, 0.08);
-}
-
-.switcher button:active {
-  transform: scale(0.98);
-}
-
-#formSubtitle {
-  margin: 0;
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.auth-form {
-  display: grid;
-  gap: 14px;
-}
-
-.field {
-  display: grid;
-  gap: 7px;
-}
-
-.field label {
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.field input,
-.control {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px 13px;
-  font: inherit;
-  background: #ffffff;
-  outline: none;
-  width: 100%;
-}
-
-.field input:focus,
-.control:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 4px rgba(31, 95, 166, 0.16);
-}
-
-.hidden {
-  display: none;
-}
-
-.submit-btn {
-  margin-top: 8px;
-  border: 0;
-  border-radius: 12px;
-  padding: 12px;
-  background: linear-gradient(92deg, var(--navy), var(--primary-2) 58%, var(--teal));
-  color: #ffffff;
-  font-weight: 800;
-  font-size: 15px;
-  cursor: pointer;
-  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
-}
-
-.submit-btn:hover {
-  filter: brightness(1.03);
-  transform: translateY(-1px);
-  box-shadow: 0 10px 18px rgba(17, 62, 110, 0.22);
-}
-
-.message {
-  min-height: 22px;
-  margin: 14px 0 0;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.message.success {
-  color: var(--ok);
-}
-
-.message.error {
-  color: var(--danger);
-}
-
-.upload-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.upload-header h2 {
-  margin: 0;
-  font-family: "Space Grotesk", sans-serif;
-}
-
-.upload-subtitle {
-  margin: 10px 0 18px;
-  color: var(--muted);
-}
-
-.stepper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  margin: 10px 0 16px;
-}
-
-.step-chip {
-  text-align: center;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 8px 10px;
-  font-size: 13px;
-  font-weight: 800;
-  color: #5d7190;
-  background: #f3f6fb;
-  transition: all 0.2s ease;
-}
-
-.step-chip.active {
-  color: #0f2d4e;
-  border-color: #b7cde7;
-  background: #e8f1fc;
-  box-shadow: inset 0 0 0 1px rgba(38, 97, 166, 0.15);
-}
-
-.workflow-step {
-  margin-top: 6px;
-}
-
-.summary-box {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: var(--surface-soft);
-  padding: 12px;
-  color: #25496f;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
-}
-
-.summary-box p {
-  margin: 5px 0;
-  font-size: 14px;
-}
-
-.workflow-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-  flex-wrap: wrap;
-}
-
-.upload-zone-wrap {
-  margin-top: 2px;
-}
-
-.upload-zone {
-  border: 1.5px dashed #b8cbe0;
-  border-radius: 14px;
-  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
-  min-height: 132px;
-  display: grid;
-  place-content: center;
-  text-align: center;
-  gap: 6px;
-  cursor: pointer;
-  padding: 14px;
-  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
-}
-
-.upload-zone:hover {
-  border-color: #7ca4cf;
-  background: linear-gradient(180deg, #fafdff 0%, #eef5ff 100%);
-  transform: translateY(-1px);
-}
-
-.upload-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  margin: 0 auto;
-  display: grid;
-  place-content: center;
-  font-size: 22px;
-  font-weight: 700;
-  color: #21507f;
-  background: #e5eef9;
-}
-
-.upload-title {
-  font-size: 14px;
-  font-weight: 800;
-  color: #1f4469;
-}
-
-.upload-hint {
-  font-size: 12px;
-  color: #5f7691;
-}
-
-.file-input-hidden {
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-}
-
-.chat-panel {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: #f7fbff;
-  padding: 12px;
-  margin-top: 10px;
-  display: grid;
-  gap: 10px;
-  max-height: 220px;
-  overflow-y: auto;
-}
-
-.chat-bubble {
-  padding: 10px 12px;
-  border-radius: 12px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.chat-bubble.user {
-  justify-self: end;
-  max-width: 92%;
-  background: #e8f1ff;
-  border: 1px solid #bfd6f4;
-  color: #1f4268;
-}
-
-.chat-bubble.bot {
-  justify-self: start;
-  max-width: 96%;
-  background: #ffffff;
-  border: 1px solid #d4e0ee;
-  color: #274968;
-}
-
-.logout-btn {
-  border: 1px solid var(--border);
-  background: #ffffff;
-  border-radius: 10px;
-  padding: 8px 12px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.secondary-btn {
-  border: 1px solid #b8cbe0;
-  background: #f1f6fc;
-  color: #1f4469;
-  border-radius: 12px;
-  padding: 12px 14px;
-  font-weight: 800;
-  font-size: 14px;
-  cursor: pointer;
-  transition: background 0.18s ease, transform 0.14s ease;
-}
-
-.secondary-btn:hover {
-  background: #e7f0fa;
-}
-
-.secondary-btn:active {
-  transform: scale(0.98);
-}
-
-.section {
-  padding: 20px 0 26px;
-}
-
-.section-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 24px;
-  box-shadow: 0 10px 24px rgba(12, 34, 58, 0.09);
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.section-card:hover {
-  box-shadow: 0 14px 26px rgba(12, 34, 58, 0.13);
-  transform: translateY(-1px);
-}
-
-.section-card h2 {
-  margin: 0 0 10px;
-  font-family: "Space Grotesk", sans-serif;
-}
-
-.section-card p {
-  margin: 0;
-  color: var(--muted);
-  line-height: 1.7;
-}
-
-.service-grid {
-  margin-top: 14px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-
-.service-grid article {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px;
-  background: var(--surface-soft);
-}
-
-.service-grid h3 {
-  margin: 0 0 8px;
-  font-size: 16px;
-}
-
-.contact-grid {
-  margin-top: 14px;
-  display: grid;
-  gap: 8px;
-  color: #193b61;
-}
-
-.analysis-result {
-  margin-top: 16px;
-  border-top: 1px solid var(--border);
-  padding-top: 14px;
-}
-
-.result-summary h3 {
-  margin: 0 0 8px;
-  font-family: "Space Grotesk", sans-serif;
-}
-
-.result-summary p {
-  margin: 4px 0;
-  color: #1d3352;
-}
-
-.result-visual {
-  margin-top: 12px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px;
-  background: linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%);
-}
-
-.result-visual h3 {
-  margin: 0 0 10px;
-}
-
-.bar-row {
-  display: grid;
-  grid-template-columns: 170px 1fr 52px;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.bar-label,
-.bar-value {
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.bar-track {
-  width: 100%;
-  height: 12px;
-  border-radius: 999px;
-  background: #dde5f1;
-  overflow: hidden;
-}
-
-.bar-fill {
-  height: 100%;
-  border-radius: 999px;
-}
-
-.bar-fill.dup {
-  background: #2d6ec8;
-}
-
-.bar-fill.inc {
-  background: #d08f28;
-}
-
-.bar-fill.con {
-  background: #bd4b58;
-}
-
-.result-list {
-  margin-top: 12px;
-  display: grid;
-  gap: 10px;
-}
-
-.result-card {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 10px 12px;
-  background: #f9fbfe;
-  transition: box-shadow 0.16s ease;
-}
-
-.result-card:hover {
-  box-shadow: 0 10px 20px rgba(12, 34, 58, 0.09);
-}
-
-.result-card h4 {
-  margin: 0 0 6px;
-}
-
-.result-muted {
-  color: var(--muted);
-}
-
-.table-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.result-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 8px;
-}
-
-.result-table th,
-.result-table td {
-  border: 1px solid var(--border);
-  padding: 8px;
-  text-align: left;
-  font-size: 13px;
-  vertical-align: top;
-}
-
-.result-table th {
-  background: #eef4ff;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 980px) {
-  .hero-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-metrics {
-    grid-template-columns: 1fr;
-  }
-
-  .preview-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .service-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .bar-row {
-    grid-template-columns: 1fr;
-    gap: 6px;
-  }
-
-  .nav-links {
-    gap: 12px;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  .topbar-inner {
-    padding-block: 8px;
-  }
-}
-
-.page-links {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.page-link {
-  border: 1px solid #bfd0e3;
-  border-radius: 10px;
-  padding: 6px 10px;
-  font-size: 13px;
-  font-weight: 700;
-  color: #23496f;
-  text-decoration: none;
-  background: #f4f8fd;
-}
-
-.page-link.active {
-  background: #e7f1ff;
-  border-color: #98b9dc;
-  color: #14395f;
-}
-
-.flow-main {
-  padding: 28px 0 36px;
-}
-
-.flow-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  box-shadow: 0 14px 30px rgba(12, 31, 53, 0.12);
-  padding: 22px;
-}
-
-.flow-card h1 {
-  margin: 0;
-  font-family: "Space Grotesk", sans-serif;
-  font-size: clamp(28px, 4vw, 40px);
-}
-
-.user-badge {
-  border: 1px solid #c6d9ee;
-  border-radius: 999px;
-  padding: 8px 12px;
-  background: #f2f8ff;
-  color: #24486d;
-  font-weight: 700;
-  font-size: 13px;
-}
-
-.loading-panel {
-  margin-top: 16px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 18px;
-  background: #f5f9ff;
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-}
-
-.spinner {
-  width: 30px;
-  height: 30px;
-  border: 3px solid #c8d8eb;
-  border-top-color: #1f5fa6;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin: 12px 0 14px;
-}
-
-.stat-card {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px;
-  background: #f9fbfe;
-}
-
-.stat-card h3 {
-  margin: 0;
-  font-size: 14px;
-}
-
-.stat-card p {
-  margin: 6px 0 0;
-  font-size: 28px;
-  font-weight: 800;
-}
-
-.stat-dup p {
-  color: #2d6ec8;
-}
-
-.stat-inc p {
-  color: #d08f28;
-}
-
-.stat-con p {
-  color: #bd4b58;
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  margin-bottom: 14px;
-}
-
-.summary-item {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 10px;
-  background: #f9fbfe;
-  display: grid;
-  gap: 4px;
-}
-
-.summary-item span {
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.summary-item strong {
-  color: #1b3d63;
-  font-size: 14px;
-}
-
-.section-subtitle {
-  margin: 6px 0 10px;
-  font-family: "Space Grotesk", sans-serif;
-  font-size: 20px;
-  color: #183d62;
-}
-
-.detailed-summary-text {
-  white-space: pre-wrap;
-  line-height: 1.65;
-  color: #1d3552;
-  font-size: 14px;
-}
-
-.as-link {
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.submit-link {
-  min-width: 220px;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 980px) {
-  .page-links {
-    gap: 6px;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  .stats-grid,
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
-}

frontend/summary.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Final Summary | LegalSI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <header class="topbar">
-      <div class="container topbar-inner">
-        <a class="brand" href="index.html#home">LegalSI</a>
-        <div class="page-links">
-          <a class="page-link" href="upload.html">Upload</a>
-          <a class="page-link" href="issues.html">Issue Analysis</a>
-          <a class="page-link active" href="summary.html">Final Summary</a>
-          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
-        </div>
-      </div>
-    </header>
-
-    <main class="flow-main">
-      <section class="container flow-card">
-        <div class="upload-header">
-          <h1>Final Document Summary</h1>
-          <span id="userBadge" class="user-badge"></span>
-        </div>
-        <p class="upload-subtitle">Overall analysis result for the entire uploaded legal document.</p>
-
-        <div id="summaryDetails" class="summary-grid"></div>
-        <h3 class="section-subtitle">Detailed Document Summary</h3>
-        <article class="result-card">
-          <div id="detailedSummaryText" class="detailed-summary-text"></div>
-        </article>
-        <h3 class="section-subtitle">Page-wise Summary</h3>
-        <div id="pageSummaryBoard" class="result-list"></div>
-        <h3 class="section-subtitle">Top Findings</h3>
-        <div id="findingsBoard" class="result-list"></div>
-        <h3 class="section-subtitle">Line Error Dashboard</h3>
-        <article class="result-card">
-          <div id="lineErrorDashboard"></div>
-        </article>
-
-        <div class="workflow-actions">
-          <a class="secondary-btn as-link" href="issues.html">Back to Issue Analysis</a>
-          <a class="submit-btn as-link submit-link" href="upload.html">Analyze New Document</a>
-        </div>
-      </section>
-    </main>
-
-    <script src="app.js"></script>
-  </body>
-</html>

frontend/upload.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Upload Document | LegalSI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <header class="topbar">
-      <div class="container topbar-inner">
-        <a class="brand" href="index.html#home">LegalSI</a>
-        <div class="page-links">
-          <a class="page-link active" href="upload.html">Upload</a>
-          <a class="page-link" href="issues.html">Issue Analysis</a>
-          <a class="page-link" href="summary.html">Final Summary</a>
-          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
-        </div>
-      </div>
-    </header>
-
-    <main class="flow-main">
-      <section class="container flow-card">
-        <div class="upload-header">
-          <h1>Upload Document</h1>
-          <span id="userBadge" class="user-badge"></span>
-        </div>
-        <p class="upload-subtitle">Upload legal document, then continue to issue analysis and final summary pages.</p>
-
-        <form id="uploadForm" class="auth-form" novalidate>
-          <div class="field">
-            <label for="scanMode">Scan Mode</label>
-            <select id="scanMode" class="control">
-              <option>Standard Scan (Recommended)</option>
-              <option>Deep Search (Fuzzy)</option>
-              <option>Strict (Duplicates Only)</option>
-            </select>
-          </div>
-
-          <div class="field upload-zone-wrap">
-            <label for="legalFile">Upload File (PDF/DOCX/TXT)</label>
-            <label class="upload-zone" for="legalFile">
-              <span class="upload-icon">+</span>
-              <span class="upload-title">Drop your document or click to browse</span>
-              <span class="upload-hint">Supported: PDF, DOCX, TXT</span>
-            </label>
-            <input id="legalFile" class="control file-input-hidden" type="file" accept=".pdf,.docx,.txt" required />
-          </div>
-
-          <div id="analysisInputSummary" class="summary-box hidden"></div>
-
-          <div class="workflow-actions">
-            <a class="secondary-btn as-link" href="index.html#home">Back to Home</a>
-            <button id="runUploadBtn" class="submit-btn" type="submit">Upload and Analyze</button>
-          </div>
-        </form>
-
-        <div id="loadingState" class="loading-panel hidden" aria-live="polite">
-          <div class="spinner"></div>
-          <p>Analyzing document. Please wait...</p>
-        </div>
-
-        <p id="uploadMessage" class="message" aria-live="polite"></p>
-      </section>
-    </main>
-
-    <script src="app.js"></script>
-  </body>
-</html>

frontend/workflow.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="refresh" content="0;url=upload.html" />
-    <title>Redirecting</title>
-  </head>
-  <body>
-    <p>Redirecting to upload page...</p>
-  </body>
-</html>