templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CPU Benchmark Submissions</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
  <script>
    tailwind.config = {
      darkMode: "class"
    };
  </script>
  <script>
    (function() {
      var storageKey = "cpu-benchmark-theme";
      var root = document.documentElement;
      var stored = null;

      try {
        stored = localStorage.getItem(storageKey);
      } catch (err) {}

      var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
      var theme = stored === "light" || stored === "dark" ? stored : (prefersDark ? "dark" : "light");

      root.classList.toggle("dark", theme === "dark");
      root.dataset.theme = theme;
    })();
  </script>
</head>
<body class="min-h-screen bg-slate-100 text-slate-900 transition-colors dark:bg-slate-950 dark:text-slate-100">
  <div class="bg-slate-950 text-white dark:bg-slate-900">
    <div class="mx-auto max-w-7xl px-6 py-10">
      <div class="flex items-start justify-between gap-4">
        <p class="text-sm uppercase tracking-[0.35em] text-cyan-300">CPU Benchmark Platform</p>
        <button
          type="button"
          id="theme-toggle"
          aria-label="Toggle theme"
          class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-2 text-sm font-medium text-slate-100 backdrop-blur transition hover:bg-white/15"
        >
          <span id="theme-toggle-icon" aria-hidden="true">◐</span>
          <span id="theme-toggle-label">Theme</span>
        </button>
      </div>
      <div class="mt-4 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div class="max-w-3xl">
          <h1 class="text-4xl font-bold tracking-tight">Simple CPU Benchmark Server</h1>
          <p class="mt-3 text-sm text-slate-300">
            Browse recent benchmark submissions, filter by submitter or CPU brand, and inspect per-core throughput details.
          </p>
        </div>
        <div class="rounded-2xl bg-white/10 px-4 py-3 text-sm text-slate-200 backdrop-blur dark:bg-white/5">
          <div>Total results: <span class="font-semibold text-white">{{ .TotalCount }}</span></div>
          {{ if gt .ShowingTo 0 }}
          <div>Showing {{ .ShowingFrom }} to {{ .ShowingTo }}</div>
          {{ else }}
          <div>No submissions match the current filters</div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>

  <main class="mx-auto max-w-7xl px-6 py-8">
    <section class="-mt-12 rounded-3xl border border-slate-200 bg-white p-6 shadow-xl shadow-slate-300/30 transition-colors dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/20">
      <form method="get" action="/" class="grid gap-4 lg:grid-cols-[2fr_2fr_1fr_1fr_1fr_1fr_1fr_auto]">
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">General search</span>
          <input
            type="text"
            name="text"
            value="{{ .QueryText }}"
            placeholder="Submitter, score, vendor, features, thread mode"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500"
          >
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">CPU brand</span>
          <input
            type="text"
            name="cpu"
            value="{{ .QueryCPU }}"
            placeholder="Ryzen 7 5800X, i7-13700K, Xeon"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500"
          >
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">Thread mode</span>
          <select
            name="thread"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
          >
            <option value="" {{ if eq .QueryThread "" }}selected{{ end }}>All</option>
            <option value="single" {{ if eq .QueryThread "single" }}selected{{ end }}>Single-threaded</option>
            <option value="multi" {{ if eq .QueryThread "multi" }}selected{{ end }}>Multi-threaded</option>
          </select>
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">Platform</span>
          <select
            name="platform"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
          >
            <option value="" {{ if eq .QueryPlatform "" }}selected{{ end }}>All</option>
            <option value="windows" {{ if eq .QueryPlatform "windows" }}selected{{ end }}>Windows</option>
            <option value="linux" {{ if eq .QueryPlatform "linux" }}selected{{ end }}>Linux</option>
            <option value="macos" {{ if eq .QueryPlatform "macos" }}selected{{ end }}>macOS</option>
          </select>
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">Intensity</span>
          <input
            type="number"
            min="1"
            name="intensity"
            value="{{ if gt .QueryIntensity 0 }}{{ .QueryIntensity }}{{ end }}"
            placeholder="10"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500"
          >
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">Duration (s)</span>
          <input
            type="number"
            min="1"
            name="durationSecs"
            value="{{ if gt .QueryDuration 0 }}{{ .QueryDuration }}{{ end }}"
            placeholder="20"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500"
          >
        </label>
        <label class="block">
          <span class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">Sort</span>
          <select
            name="sort"
            class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm text-slate-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
          >
            <option value="newest" {{ if eq .QuerySort "newest" }}selected{{ end }}>Newest first</option>
            <option value="oldest" {{ if eq .QuerySort "oldest" }}selected{{ end }}>Oldest first</option>
            <option value="score_desc" {{ if eq .QuerySort "score_desc" }}selected{{ end }}>Highest score</option>
            <option value="score_asc" {{ if eq .QuerySort "score_asc" }}selected{{ end }}>Lowest score</option>
            <option value="mops_desc" {{ if eq .QuerySort "mops_desc" }}selected{{ end }}>Highest MOps/sec</option>
            <option value="mops_asc" {{ if eq .QuerySort "mops_asc" }}selected{{ end }}>Lowest MOps/sec</option>
          </select>
        </label>
        <div class="flex gap-3 lg:justify-end">
          <button
            type="submit"
            class="inline-flex items-center justify-center rounded-xl bg-cyan-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-cyan-500"
          >
            Search
          </button>
          <a
            href="/"
            class="inline-flex items-center justify-center rounded-xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
          >
            Clear
          </a>
        </div>
      </form>
    </section>

    <section class="mt-8 space-y-4">
      {{ if not .Submissions }}
      <div class="rounded-2xl border border-dashed border-slate-300 bg-white px-6 py-12 text-center text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
        No submissions to display.
      </div>
      {{ end }}

      {{ range .Submissions }}
      <details class="group overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/20">
        <summary class="list-none cursor-pointer">
          <div class="grid gap-4 p-6 lg:grid-cols-[1.2fr_2fr_repeat(6,minmax(0,1fr))] lg:items-center">
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Submitter</p>
              <p class="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{{ .Submitter }}</p>
              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ .SubmissionID }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">CPU</p>
              <p class="mt-2 font-semibold text-slate-900 dark:text-slate-100">{{ .CPUInfo.BrandString }}</p>
              <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ .CPUInfo.VendorID }} • {{ .CPUInfo.PhysicalCores }}C / {{ .CPUInfo.LogicalCores }}T</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Score</p>
              <p class="mt-2 text-2xl font-bold text-cyan-700">{{ formatInt64 .Score }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">MOps/sec</p>
              <p class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">{{ formatFloat .MOpsPerSec }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Mode</p>
              <p class="mt-2 inline-flex rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-200">{{ modeLabel .Config.MultiCore }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Platform</p>
              <p class="mt-2 inline-flex rounded-full bg-cyan-50 px-3 py-1 text-sm font-medium text-cyan-800">{{ .Platform }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Intensity</p>
              <p class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">{{ .Config.Intensity }}</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-[0.25em] text-slate-400">Run Time</p>
              <p class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">{{ .Config.DurationSecs }}s</p>
            </div>
          </div>
        </summary>

        <div class="border-t border-slate-100 bg-slate-50 px-6 py-6 dark:border-slate-800 dark:bg-slate-950/70">
          <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Started</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">{{ formatTime .StartedAt }}</p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Submitted</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">{{ formatTime .SubmittedAt }}</p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Total ops</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">{{ formatInt64 .TotalOps }}</p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Duration</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">
                {{ .Config.DurationSecs }} seconds
              </p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Intensity</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">
                {{ .Config.Intensity }}
              </p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Core Filter</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">
                {{ .Config.CoreFilter }}
              </p>
            </div>
            <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
              <p class="text-xs uppercase tracking-[0.2em] text-slate-400">Platform</p>
              <p class="mt-2 text-sm font-medium text-slate-800 dark:text-slate-200">{{ .Platform }}</p>
            </div>
          </div>

          <div class="mt-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
            <table class="min-w-full divide-y divide-slate-200 text-sm dark:divide-slate-800">
              <thead class="bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                <tr>
                  <th class="px-4 py-3 text-left font-semibold">Logical ID</th>
                  <th class="px-4 py-3 text-left font-semibold">Core Type</th>
                  <th class="px-4 py-3 text-left font-semibold">MOps/sec</th>
                  <th class="px-4 py-3 text-left font-semibold">Total Ops</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                {{ range .CoreResults }}
                <tr>
                  <td class="px-4 py-3 font-medium text-slate-900 dark:text-slate-100">{{ .LogicalID }}</td>
                  <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ .CoreType }}</td>
                  <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ formatFloat .MOpsPerSec }}</td>
                  <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ formatInt64 .TotalOps }}</td>
                </tr>
                {{ else }}
                <tr class="dark:bg-slate-900">
                  <td colspan="4" class="px-4 py-6 text-center text-slate-500 dark:text-slate-400">No per-core results available.</td>
                </tr>
                {{ end }}
              </tbody>
            </table>
          </div>
        </div>
      </details>
      {{ end }}
    </section>

    {{ if gt .TotalPages 1 }}
    <nav class="mt-8 flex flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm md:flex-row md:items-center md:justify-between dark:bg-slate-900 dark:shadow-black/20">
      <div class="text-sm text-slate-500 dark:text-slate-400">
        Page {{ .Page }} of {{ .TotalPages }}
      </div>
      <div class="flex gap-3">
        {{ if gt .Page 1 }}
        <a href="{{ .PrevURL }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">Previous</a>
        {{ else }}
        <span class="cursor-not-allowed rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-800 dark:text-slate-600">Previous</span>
        {{ end }}
        {{ if lt .Page .TotalPages }}
        <a href="{{ .NextURL }}" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700 dark:bg-cyan-600 dark:hover:bg-cyan-500">Next</a>
        {{ else }}
        <span class="cursor-not-allowed rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-800 dark:text-slate-600">Next</span>
        {{ end }}
      </div>
    </nav>
    {{ end }}
  </main>
  <script>
    (function() {
      var storageKey = "cpu-benchmark-theme";
      var root = document.documentElement;
      var button = document.getElementById("theme-toggle");
      var icon = document.getElementById("theme-toggle-icon");
      var label = document.getElementById("theme-toggle-label");

      if (!button || !icon || !label) {
        return;
      }

      function applyTheme(theme, persist) {
        currentTheme = theme;
        root.classList.toggle("dark", theme === "dark");
        root.dataset.theme = theme;
        button.setAttribute("aria-pressed", String(theme === "dark"));
        icon.textContent = theme === "dark" ? "☾" : "☼";
        label.textContent = theme === "dark" ? "Dark" : "Light";

        if (persist) {
          try {
            localStorage.setItem(storageKey, theme);
          } catch (err) {}
        }
      }

      var currentTheme = root.dataset.theme === "dark" ? "dark" : "light";
      applyTheme(currentTheme, false);

      button.addEventListener("click", function() {
        applyTheme(currentTheme === "dark" ? "light" : "dark", true);
      });
    })();
  </script>
</body>
</html>