coursehub/index.php

<?php
/* CourseHub SPA shell — all data flows through api/ via fetch. */

/**
 * Version a local asset by its mtime.
 *
 * Browsers and CDNs (Cloudflare in front of this app) cache assets/*.css|js
 * indefinitely otherwise, and a stale app.js against a newer shell fails hard:
 * it grabs element IDs that no longer exist, throws before it can unhide the
 * shell, and leaves a blank page with nothing in the markup to explain it.
 * Stamping the mtime means a deploy is a new URL, so that can't happen.
 */
function asset(string $path): string
{
    $mtime = @filemtime(__DIR__ . '/' . $path);
    return $path . '?v=' . ($mtime ?: '0');
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#F2F0EA">
<title>CourseHub</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.css" rel="stylesheet">
<link href="<?= asset('assets/style.css') ?>" rel="stylesheet">

<!-- Installed before every other script so it can report failures in them
     (including assets/app.js itself). Without it a JS error leaves the shell
     hidden and the page simply blank, with the reason only in the console. -->
<script>
(function () {
  var box = null;
  function report(kind, detail) {
    if (!box) {
      box = document.createElement('pre');
      box.id = 'boot-error';
      box.textContent = 'CourseHub failed to start.\n\n';
      (document.body || document.documentElement).appendChild(box);
    }
    box.textContent += kind + ': ' + detail + '\n';
  }
  // Capture phase, because resource load failures don't bubble.
  window.addEventListener('error', function (e) {
    var el = e.target;
    if (el && el !== window && (el.src || el.href)) {
      report('Failed to load', el.src || el.href);
    } else {
      report('Error', (e.message || e.error) +
             ' (' + (e.filename || '?') + ':' + (e.lineno || '?') + ')');
    }
  }, true);
  window.addEventListener('unhandledrejection', function (e) {
    report('Unhandled rejection', (e.reason && e.reason.message) || e.reason);
  });
})();
</script>
</head>
<body>

<div class="app" id="app-shell" hidden>
  <aside class="sidebar">
    <a class="brand" href="#/">
      <span class="brand-mark">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
      </span>
      <span class="brand-name">CourseHub</span>
    </a>

    <nav class="nav" id="nav-main"></nav>

    <div class="sidebar-rule"></div>
    <div class="sidebar-label">Shelves</div>
    <div class="shelf-list" id="nav-shelves"></div>

    <div class="sidebar-spacer"></div>
    <div class="scan-card">
      <div class="scan-card-head">
        <span>Library scanned</span>
        <span class="mono" id="scan-when">—</span>
      </div>
      <button class="btn btn-accent btn-block" id="btn-scan" data-scan>
        <span class="scan-spin" id="scan-spin">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><path d="M21 4v5h-5"></path></svg>
        </span><span id="scan-label">Scan library</span>
      </button>
    </div>
  </aside>

  <main class="main">
    <header class="topbar">
      <label class="search">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#807A70" stroke-width="1.7" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path></svg>
        <input id="search-input" type="search" autocomplete="off" placeholder="Search courses and videos" aria-label="Search the library">
        <button id="btn-search-clear" class="icon-btn" type="button" title="Clear search" hidden>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"></path></svg>
        </button>
      </label>
      <button class="icon-btn scan-mobile" id="btn-scan-mobile" data-scan title="Scan library">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><path d="M21 4v5h-5"></path></svg>
      </button>
      <div class="topbar-end">
        <span class="mono topbar-totals" id="topbar-totals"></span>
        <button class="avatar" id="btn-account" title="Account"></button>
      </div>
    </header>

    <div class="view" id="view">
      <div class="loading"><span class="spinner"></span></div>
    </div>
  </main>

  <nav class="tabbar" id="nav-tabs"></nav>
</div>

<!-- Holds the boot spinner until we know whether there is a session, then
     becomes either the sign-in card or is hidden in favour of the shell. -->
<div class="auth" id="auth">
  <div class="loading"><span class="spinner"></span></div>
</div>

<div class="toasts" id="toasts"></div>
<div id="overlay-root"></div>

<script src="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js"></script>
<script src="<?= asset('assets/app.js') ?>"></script>
</body>
</html>