NimbleJs/index.html at main · onuracar-dev/NimbleJs · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Interactive NimbleJS signals, batching, persistence, and history demo." />
    <title>NimbleJS interactive demo</title>
    <style>
      :root { color: #172033; background: #f5f7ff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
      * { box-sizing: border-box; }
      body { margin: 0; min-height: 100vh; padding: 4rem 1.25rem; background: radial-gradient(circle at top, #e7e9ff, transparent 38rem); }
      main { max-width: 48rem; margin: 0 auto; }
      .eyebrow { color: #5948d6; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
      h1 { margin: .35rem 0 .75rem; font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: -.06em; }
      .lede { max-width: 38rem; color: #596176; font-size: 1.05rem; line-height: 1.7; }
      .card { margin-top: 2rem; padding: 1.5rem; border: 1px solid #dfe3f3; border-radius: 1.25rem; background: rgba(255,255,255,.9); box-shadow: 0 1rem 3rem rgba(48, 45, 100, .08); }
      .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
      .metric { padding: 1rem; border-radius: .9rem; background: #f7f7fc; }
      .label { display: block; color: #70778b; font-size: .8rem; }
      .value { display: block; margin-top: .25rem; font-size: 2rem; font-weight: 800; }
      .controls { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
      button { border: 0; border-radius: .7rem; padding: .72rem 1rem; color: white; background: #5948d6; font: inherit; font-weight: 700; cursor: pointer; }
      button.secondary { color: #424a60; background: #e9ebf5; }
      button:disabled { cursor: not-allowed; opacity: .45; }
      .note { margin: 1.2rem 0 0; color: #70778b; font-size: .9rem; }
      code { color: #4636bc; }
    </style>
  </head>
  <body>
    <main>
      <div class="eyebrow">Framework-agnostic reactivity</div>
      <h1>NimbleJS</h1>
      <p class="lede">A tiny live lab for signals, computed values, batched writes, persistence, and bounded undo/redo history.</p>

      <section class="card" aria-labelledby="counter-title">
        <h2 id="counter-title">Reactive counter</h2>
        <div class="metrics" aria-live="polite">
          <div class="metric"><span class="label">Count</span><span id="count" class="value">0</span></div>
          <div class="metric"><span class="label">Computed ×2</span><span id="double-count" class="value">0</span></div>
        </div>
        <div class="controls">
          <button id="btn-dec" aria-label="Decrease count">−1</button>
          <button id="btn-inc" aria-label="Increase count">+1</button>
          <button id="btn-batch">Batch +3</button>
          <button id="btn-undo" class="secondary" disabled>Undo</button>
          <button id="btn-redo" class="secondary" disabled>Redo</button>
        </div>
        <p class="note"><code>Batch +3</code> performs three writes but reactive consumers render once. State survives refresh through localStorage.</p>
      </section>
    </main>
    <script type="module" src="/main.ts"></script>
  </body>
</html>