index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LOGOS Technical Report</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #525659; color: #e8eaed; }
    .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #171a21; border-bottom: 1px solid #262b36; }
    .topbar .title { font-size: 15px; font-weight: 600; }
    .topbar a { color: #ffd21e; text-decoration: none; font-size: 13px; padding: 6px 14px; border: 1px solid #ffd21e; border-radius: 6px; transition: all .15s; }
    .topbar a:hover { background: #ffd21e; color: #171a21; }
    #pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 12px; }
    #pages canvas { max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.5); background: #fff; }
    #status { text-align: center; padding: 40px 16px; color: #c8ccd2; font-size: 14px; }
  </style>
</head>
<body>
  <div class="topbar">
    <span class="title">📄 LOGOS: Language of Generative Objects in Science — Technical Report</span>
    <a href="https://huggingface.co/spaces/LOGOS-Hub/LOGOS-Technical-Report/resolve/main/LOGOS_technical_report.pdf?download=true" target="_blank" rel="noopener">Download PDF</a>
  </div>
  <div id="status">Loading report…</div>
  <div id="pages"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  <script>
    const PDF_URL = "LOGOS_technical_report.pdf";
    const statusEl = document.getElementById("status");
    const pagesEl = document.getElementById("pages");

    if (!window.pdfjsLib) {
      statusEl.textContent = "Failed to load PDF renderer. Please use the Download PDF button.";
    } else {
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

      const scale = Math.min(2, (window.devicePixelRatio || 1) * 1.5);

      pdfjsLib.getDocument({ url: PDF_URL }).promise.then(async (pdf) => {
        statusEl.style.display = "none";
        for (let n = 1; n <= pdf.numPages; n++) {
          const page = await pdf.getPage(n);
          const viewport = page.getViewport({ scale });
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          canvas.style.width = (viewport.width / scale) + "px";
          pagesEl.appendChild(canvas);
          await page.render({ canvasContext: ctx, viewport }).promise;
        }
      }).catch((err) => {
        statusEl.textContent = "Could not render the PDF in-browser. Please use the Download PDF button above.";
        console.error(err);
      });
    }
  </script>
</body>
</html>