repos
repos / finance / tree / templates / base.html @ master
5.7 KB raw 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>{% block title %}{{ title }}{% endblock %} · {{ site.title }}</title>
  <meta name="description" content="{% block description %}Track stocks, ETFs, and indexes with live charts, fundamentals, and SEC filings.{% endblock %}">
  {% if base_url %}<base href="{{ base_url }}">{% endif %}
  <meta name="theme-color" content="#f0ece1">
  <link rel="icon" type="image/svg+xml" href="/favicon.ico">
  {% block extra_head %}{% endblock %}
  <link rel="stylesheet" href="{{ vite_asset('static_src/base/index.js', 'css') }}">
  {% block extra_css %}{% endblock %}
</head>
<body>
  <header class="topbar">
    <div class="topbar__inner">
      <a class="brand" href="/">
        {# Paper Ledger mark: a rising figures line over the accountant's
           double underline (the ledger sign for a finalized total). #}
        <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
          <polyline points="4,20 12,14 19,17 28,7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="28" cy="7" r="2" fill="currentColor"/>
          <line x1="4" y1="26" x2="28" y2="26" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <line x1="4" y1="30" x2="28" y2="30" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span class="brand__name">{{ site.title }}</span>
      </a>
      <form class="search" action="/search" method="get" role="search">
        <input type="search" name="q" placeholder="Search ticker or company" autocomplete="off" aria-label="Search">
      </form>
      <nav class="topnav">
        <a href="/"{% if request.path == '/' %} class="is-active"{% endif %}>Markets</a>
        <a href="/search"{% if request.path == '/search' %} class="is-active"{% endif %}>Search</a>
      </nav>
      {% include "includes/status_indicator.html" %}
    </div>
  </header>

  <main>
    {% block main %}{% endblock %}
  </main>

  <nav class="bottomnav">
    <a href="/"{% if request.path == '/' %} class="is-active"{% endif %}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 19V11M10 19V5M16 19v-6M21 19H3"/></svg>
      <span>Markets</span>
    </a>
    <a href="/search"{% if request.path == '/search' %} class="is-active"{% endif %}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      <span>Search</span>
    </a>
  </nav>

  {# Two-tier footer (Phase 7), modeled on the sibling apps' pattern (repos'
     `footer__grid` with `// LABEL` mono headers) but in Paper Ledger tokens: a
     multi-column upper block over a slim copyright bar. The data attribution
     (was the old one-line footer) folds into the About column. #}
  <footer class="footer">
    <div class="wrap footer__grid">
      <div class="footer__about">
        <div class="footer__label">// {{ site.title }}</div>
        <p>A self-hosted market watcher for stocks, ETFs, indexes, and
          commodities: live charts, key stats, fundamentals, SEC filings, and
          at-a-glance health reads. For watching the market only &mdash; no
          portfolio, no accounts.</p>
        <p class="footer__attrib">Market data via <span>Yahoo Finance</span> ·
          fundamentals &amp; filings via <span>SEC EDGAR</span> · prices are
          delayed · <strong>not investment advice</strong>.</p>
      </div>
      <div class="footer__col">
        <div class="footer__label">// Pages</div>
        <ul>
          <li><a href="/">Markets</a></li>
          <li><a href="/search">Search</a></li>
          <li><a href="/health">Data health</a></li>
          <li><a href="https://github.com/overshard/finance" target="_blank" rel="noopener">Source</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <div class="footer__label">// Elsewhere</div>
        <ul>
          <li><a href="https://isaacbythewood.com/" target="_blank" rel="noopener">Portfolio</a></li>
          <li><a href="https://blog.bythewood.me/" target="_blank" rel="noopener">Blog</a></li>
          <li><a href="https://analytics.bythewood.me/" target="_blank" rel="noopener">Analytics</a></li>
          <li><a href="https://status.bythewood.me/" target="_blank" rel="noopener">Status</a></li>
        </ul>
      </div>
    </div>
  </footer>

  <div class="footer-bar">
    <div class="wrap footer-bar__row">
      <small>&copy; {{ now.year }} Isaac Bythewood · Some rights reserved</small>
      <a href="https://github.com/overshard/finance" target="_blank" rel="noopener" class="footer-bar__link" aria-label="Source on GitHub">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
        </svg>
      </a>
    </div>
  </div>

  <script type="module" src="{{ vite_asset('static_src/base/index.js') }}"></script>
  {% block extra_js %}{% endblock %}
</body>
</html>
© 2026 Isaac Bythewood · Some rights reserved