history.html

<!DOCTYPE html>
<html lang="en" data-wardenone-page="history">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WardenOne - Activity</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="guide-shell.css">
<script src="theme.js"></script>
</head>
<body>
<header class="guide-topbar">
  <div class="guide-wrap guide-topbar-inner">
    <a class="guide-brand" href="popup.html" aria-label="Back to WardenOne popup">
      <span class="guide-brand-mark" aria-hidden="true"><img src="icons/icon128.png" alt=""></span>
      <span><span class="guide-brand-name">WardenOne</span><span class="guide-brand-sub">Activity centre</span></span>
    </a>
    <div class="guide-toplinks">
      <nav class="guide-nav" aria-label="Activity sections">
        <a class="is-active" href="#activity" aria-current="location">Recent</a>
        <a href="#learned">Blocked</a>
        <a href="#trusted">Trusted</a>
        <a href="notifications.html">Notifications</a>
      </nav>
      <div class="guide-credit">Developer <strong>iri.dev</strong></div>
    </div>
  </div>
</header>

<main>
  <section class="guide-hero">
    <div class="guide-wrap guide-hero-inner">
      <div>
        <div class="guide-eyebrow">Local activity centre</div>
        <h1>What WardenOne did, in plain sight.</h1>
        <p class="guide-lead"><strong>Review blocks, warnings, the sites that never load, and every exception you made.</strong> This is the complete local audit trail; it never leaves your browser.</p>
        <div class="guide-hero-actions">
          <a class="guide-btn primary" href="#activity">See recent events</a>
          <a class="guide-btn" href="notifications.html">Notification centre</a>
          <a class="guide-btn" href="https://github.com/iri-dev/WardenOne" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 19c-4 1.2-4-2-5.5-2.5M15 22v-3.8c0-1 .1-1.4-.5-2 2.8-.3 5.8-1.4 5.8-6.3 0-1.4-.5-2.6-1.3-3.5.1-.3.6-1.7-.1-3.5 0 0-1.1-.4-3.6 1.3a12.4 12.4 0 00-6.6 0C6.2 2.5 5.1 2.9 5.1 2.9c-.7 1.8-.2 3.2-.1 3.5a5 5 0 00-1.3 3.5c0 4.9 3 6 5.8 6.3-.4.4-.6.9-.6 1.8V22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>GitHub page</a>
        </div>
        <div class="guide-pills" aria-label="Activity storage details">
          <span>Local only</span>
          <span>Last 200 events, 30 days</span>
          <span>Private by default</span>
        </div>
      </div>
      <aside class="guide-summary" aria-label="Activity summary">
        <div class="summary-label">Protection record</div>
        <div class="metric-grid">
          <div class="metric"><div class="n" id="s-total">0</div><div class="l">Total</div></div>
          <div class="metric"><div class="n" id="s-blocked">0</div><div class="l">Blocked</div></div>
          <div class="metric"><div class="n" id="s-warned">0</div><div class="l">Warnings</div></div>
        </div>
        <p class="summary-copy">The newest decisions appear first, with the site, reason, and outcome kept together.</p>
      </aside>
    </div>
  </section>

  <section class="guide-section" id="activity">
    <div class="guide-wrap">
      <div class="guide-section-head">
        <div><div class="guide-kicker">Local audit trail</div><h2>Recent decisions and exceptions.</h2></div>
        <p>The timeline is the full record. Blocked and trusted sites stay beside it so automatic decisions and your own exceptions are equally visible.</p>
      </div>
      <div class="activity-grid" aria-label="Activity dashboard">
        <section class="panel dashboard-panel events-panel">
          <div class="panel-head">
            <div><span class="panel-kicker">Timeline</span><h2>Recent events</h2></div>
            <button class="btn" id="clear">Clear history</button>
          </div>
          <div class="panel-note">Blocks, warnings, and guarded decisions from the latest activity on this browser.</div>
          <div class="list" id="rows"><div class="empty">Loading...</div></div>
        </section>

        <section class="panel dashboard-panel learned-panel" id="learned">
          <div class="panel-head">
            <div><span class="panel-kicker">Never load</span><h2>Blocked sites</h2></div>
            <button class="btn" id="clear-learned">Forget all</button>
          </div>
          <!-- Two kinds of entry live here and they are not the same thing: sites
               WardenOne flagged by behaviour, and sites you blocked yourself from
               the right-click menu. Each row says which it is, so your own
               decision is not presented back to you as something WardenOne
               worked out. -->
          <div class="panel-note">Sites blocked on future visits: ones you blocked yourself from the right-click menu, and ones WardenOne flagged by behavior that were not on a blocklist. Each row says which. Remove one to let it load again.</div>
          <!-- Type-it-yourself blocking. Everything else in WardenOne decides for
               you; this is the one list where you decide, and nothing overrules it
               but your own allowlist. You do not have to be on the site to add it. -->
          <div class="block-add">
            <label class="block-add-label" for="block-input">Block a site yourself</label>
            <div class="block-add-row">
              <input class="search" id="block-input" type="text" spellcheck="false" autocomplete="off"
                placeholder="example.com &nbsp;·&nbsp; *.example.com &nbsp;·&nbsp; 192.0.2.55 &nbsp;·&nbsp; example.com/path/*"
                aria-label="Site, address or link to block">
              <select class="search" id="block-scope" aria-label="How long to block it for">
                <option value="forever">Permanently</option>
                <option value="tomorrow">Until tomorrow</option>
                <option value="session">This session</option>
              </select>
              <button class="btn small" id="block-add" type="button">Block</button>
            </div>
            <p class="block-add-note" id="block-error" hidden></p>
            <p class="block-add-note">A site name covers everything under it, so <code>example.com</code> already blocks <code>news.example.com</code>. A link with a path blocks only that path. Blocking here overrides WardenOne's own compatibility exceptions &mdash; if you block YouTube, YouTube stops loading.</p>
          </div>
          <div class="list" id="learned-rows"><div class="empty">None yet - block a site from the right-click menu, or WardenOne will add one it flags.</div></div>
        </section>

        <section class="panel dashboard-panel trusted-panel" id="trusted">
          <div class="panel-head">
            <div><span class="panel-kicker">User trusted</span><h2>Allowed and trusted sites</h2></div>
            <button class="btn" id="refresh-allowed">Refresh</button>
          </div>
          <div class="panel-note">Sites WardenOne treats more gently: allowlist entries and trusted download sources.</div>
          <div class="list" id="allowed-rows"><div class="empty">Loading...</div></div>
        </section>
      </div>
    </div>
  </section>

  <div class="tracker-runtime" aria-hidden="true">
    <span id="tracker-learner-status"></span>
    <div id="tracker-learner-list"></div>
  </div>
</main>

<footer class="guide-footer">
  <div class="guide-wrap guide-footer-inner">
    <span><strong>Last 200 events, kept for 30 days.</strong> Stored only on this device; Clear history removes them at once.</span>
    <span>Nothing here is ever uploaded or shared.</span>
  </div>
</footer>
<script src="history.js"></script>
</body>
</html>