history.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My History – TrueWrite Scan</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-white min-h-screen flex flex-col">
  <header class="border-b border-slate-800 bg-slate-950/90 backdrop-blur sticky top-0 z-20">
    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <img src="images/logo.png" alt="TrueWrite Scan logo"
             class="w-9 h-9 rounded-2xl border border-slate-700 object-cover" />
        <div>
          <p class="text-lg md:text-xl font-extrabold tracking-tight">
            <span class="bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-emerald-400 bg-clip-text text-transparent">
              TrueWrite
            </span> History
          </p>
          <p class="text-[11px] text-slate-400 uppercase tracking-[0.22em]">
            Recent grammar, plagiarism & AI scans
          </p>
        </div>
      </div>
      <a href="dashboard.html"
         class="text-xs px-3 py-1 rounded-full border border-slate-600 hover:bg-slate-800">
        ← Back to dashboard
      </a>
    </div>
  </header>

  <main class="flex-1 max-w-6xl mx-auto px-4 py-8">
    <h1 class="text-xl md:text-2xl font-semibold mb-3">My scan history</h1>
    <p class="text-sm text-slate-300 mb-4">
      Each entry represents one run of Grammar, Plagiarism, or AI content check. Stored per account
      on the backend using SQLite.
    </p>

    <div id="historyContainer"
         class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4 text-sm">
      <p id="loading" class="text-xs text-slate-400">Loading history...</p>
      <table id="historyTable" class="w-full text-xs hidden">
        <thead class="border-b border-slate-800 text-slate-400">
          <tr>
            <th class="py-2 text-left">Time (UTC)</th>
            <th class="py-2 text-left">Tool</th>
            <th class="py-2 text-left">Summary</th>
            <th class="py-2 text-left">Snippet</th>
          </tr>
        </thead>
        <tbody id="historyBody" class="divide-y divide-slate-800"></tbody>
      </table>
      <p id="emptyMsg" class="text-xs text-slate-400 hidden">No history yet. Run a check to see it here.</p>
    </div>
  </main>

  <footer class="border-t border-slate-800">
    <div class="max-w-6xl mx-auto px-4 py-4 text-[11px] text-slate-400 flex flex-col md:flex-row items-center justify-between gap-2">
      <p>© 2025 TrueWrite Scan. All rights reserved.</p>
      <p>Designed & developed by <span class="text-indigo-300 font-medium">Gopal Krushna Mahapatra</span>.</p>
    </div>
  </footer>

  <script>
    const BACKEND_URL = "https://gopalkrushnamahapatra-truewrite-scan-backend.hf.space";
    const token = localStorage.getItem("truewriteToken");
    const user = localStorage.getItem("truewriteUser");
    if (!token || !user) {
      window.location.href = "login.html";
    }

    const loading = document.getElementById("loading");
    const table = document.getElementById("historyTable");
    const bodyEl = document.getElementById("historyBody");
    const emptyMsg = document.getElementById("emptyMsg");

    async function loadHistory() {
      try {
        const res = await fetch(`${BACKEND_URL}/api/history`, {
          headers: { "Authorization": `Bearer ${token}` }
        });
        const data = await res.json();
        if (!res.ok) {
          loading.textContent = data.detail || "Failed to load history.";
          return;
        }

        const items = data.items || [];
        if (items.length === 0) {
          loading.classList.add("hidden");
          emptyMsg.classList.remove("hidden");
          return;
        }

        bodyEl.innerHTML = items.map(item => {
          const toolLabel =
            item.tool === "grammar" ? "Grammar" :
            item.tool === "plagiarism" ? "Plagiarism" :
            item.tool === "ai" ? "AI Content" :
            item.tool;
          const snippet = (item.input_text || "").slice(0, 60).replace(/\s+/g, " ");
          return `
            <tr>
              <td class="py-2 pr-2 align-top text-slate-300">${item.created_at}</td>
              <td class="py-2 pr-2 align-top text-slate-200">${toolLabel}</td>
              <td class="py-2 pr-2 align-top text-slate-300">${item.summary}</td>
              <td class="py-2 pr-2 align-top text-slate-400">${snippet}${snippet.length === 60 ? "..." : ""}</td>
            </tr>
          `;
        }).join("");

        loading.classList.add("hidden");
        table.classList.remove("hidden");
      } catch (e) {
        loading.textContent = "Failed to contact backend.";
      }
    }

    loadHistory();
  </script>
</body>
</html>