crypto-lab-ntru-classic/index.html at main · systemslibrarian/crypto-lab-ntru-classic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      const saved = localStorage.getItem('theme');
      document.documentElement.setAttribute('data-theme', saved ?? 'dark');
    </script>
    <title>crypto-lab-ntru-classic</title>
  </head>
  <body>
<!-- BEGIN crypto-lab shared header — managed; edit shared-header.html + re-run reapply-header.py
     Identical on every lab. Self-contained styles. Accents use each demo's own
     --accent CSS variable (teal #35d6bb fallback). The ONLY per-repo value is the
     repo name (crypto-lab-ntru-classic) in the GitHub link.
     Source of truth: github.com/systemslibrarian/crypto-lab/shared-header.html -->
<style>
  .cl-topbar{
    /* The bar is always dark (#0b1512) regardless of page theme, so header
       text must always be light. Mix each lab's --accent toward near-white so
       the hue still tints the brand but contrast stays >=4.5:1 on the bar even
       when a lab's accent is dark (e.g. a light-theme #1a56db). */
    --cl-ink: color-mix(in srgb, var(--accent, #35d6bb) 60%, #eafff8);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem clamp(.9rem,3vw,2rem);
    background:#0b1512;
    border-bottom:1px solid color-mix(in srgb, var(--accent, #35d6bb) 22%, transparent);
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    position:sticky;top:0;z-index:1000;
  }
  .cl-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
  .cl-badge{
    flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
    border:1.5px solid var(--accent, #35d6bb);border-radius:10px;
    color:var(--cl-ink);font-weight:700;font-size:.95rem;letter-spacing:.05em;
  }
  .cl-brand-text{display:flex;flex-direction:column;line-height:1.15}
  .cl-title{color:#eafff8;font-weight:700;font-size:1.05rem;letter-spacing:.12em}
  .cl-sub{color:#5e8b80;font-size:.72rem;letter-spacing:.04em}
  .cl-actions{display:flex;align-items:center;gap:.5rem}
  .cl-btn{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem .85rem;border-radius:10px;
    border:1px solid color-mix(in srgb, var(--accent, #35d6bb) 38%, transparent);
    background:transparent;color:var(--cl-ink);cursor:pointer;
    font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
  }
  .cl-btn:hover{
    background:color-mix(in srgb, var(--accent, #35d6bb) 14%, transparent);
    border-color:var(--accent, #35d6bb);color:#eafff8;
  }
  .cl-btn svg{width:15px;height:15px}
  .cl-icon{padding:.5rem .6rem;font-size:.95rem}
  /* Skip-to-content link: first focusable element so keyboard users can bypass
     this sticky header (WCAG 2.4.1). Hidden until focused. Fixed light-on-dark
     pair (not --accent, which can be a dark hue on some labs) keeps contrast AA. */
  .cl-skip-link{
    position:absolute;left:.5rem;top:-3rem;z-index:1001;
    padding:.55rem 1rem;border-radius:0 0 10px 10px;
    background:#eafff8;color:#0b1512;
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-weight:700;font-size:.8rem;letter-spacing:.04em;text-decoration:none;
    transition:top .15s ease;
  }
  .cl-skip-link:focus{top:0;outline:2px solid var(--accent,#35d6bb);outline-offset:2px;}
  /* hide each lab's own in-page theme toggle — the bar's toggle replaces it.
     element stays in the DOM so the lab's theme JS keeps working. */
  body :is(#theme-toggle,#themeToggle,.theme-toggle,.theme-toggle-btn,[data-theme-toggle]):not(#cl-theme-toggle){display:none!important}
  @media(max-width:560px){
    .cl-sub{display:none}
    .cl-btn span{display:none}
    .cl-btn svg{margin:0}
  }
</style>
<a class="cl-skip-link" href="#app">Skip to content</a>
<header class="cl-topbar" role="banner" aria-label="Crypto Lab">
  <a class="cl-brand" href="https://crypto-lab.systemslibrarian.dev/" aria-label="Crypto Lab home">
    <span class="cl-badge">CL</span>
    <span class="cl-brand-text">
      <span class="cl-title">CRYPTO LAB</span>
      <span class="cl-sub">systemslibrarian.dev</span>
    </span>
  </a>
  <nav class="cl-actions" aria-label="Crypto Lab navigation">
    <a class="cl-btn" href="https://crypto-lab.systemslibrarian.dev/" aria-label="Crypto Lab menu">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      <span>Menu</span>
    </a>
    <a class="cl-btn" href="https://github.com/systemslibrarian/crypto-lab-ntru-classic" target="_blank" rel="noopener" aria-label="View this project on GitHub">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7 0-.7 0-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0C17.3 5 18.3 5.3 18.3 5.3c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .4.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"/></svg>
      <span>GitHub</span>
    </a>
    <button class="cl-btn cl-icon" id="cl-theme-toggle" type="button" aria-label="Toggle color theme" title="Toggle theme">☀</button>
  </nav>
</header>
<script>
  (function () {
    var t = document.getElementById('cl-theme-toggle');
    if (t) {
      var cur = function(){ return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; };
      var paint = function(){ t.textContent = cur() === 'light' ? '☾' : '☀'; };
      paint();
      t.addEventListener('click', function () {
        var next = cur() === 'light' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', next);
        try { localStorage.setItem('theme', next); } catch (e) {}
        paint();
      });
    }
    // A page may have only one banner landmark. This shared site header is it;
    // demote any banner a lab also declared on its own page header (explicit
    // role="banner", or an implicit <header> child of <body>) so landmarks stay unique.
    function dedupeBanner() {
      var bar = document.querySelector('.cl-topbar');
      if (!bar) return;
      document.querySelectorAll('[role="banner"]').forEach(function (el) {
        if (el !== bar) el.setAttribute('role', 'group');
      });
      Array.prototype.forEach.call(document.body ? document.body.children : [], function (el) {
        if (el.tagName === 'HEADER' && el !== bar && !el.hasAttribute('role')) el.setAttribute('role', 'group');
      });
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', dedupeBanner);
    else dedupeBanner();
  })();
</script>
<!-- END crypto-lab shared header -->
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>