tinyreactive/index.html at main · zmandel/tinyreactive · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>TinyReactive Samples</title>
	<style>
		body { font-family: Arial, sans-serif; margin: 0; background: #f3f5f9; color: #1e2330; }
		main { max-width: 720px; margin: 1rem auto; padding: 0 2rem; }
		h1 { font-size: 2rem; margin-bottom: 1.5rem; text-align: center; }
		.samples { display: grid; gap: 1.5rem; }
		.card { background: #fff; border-radius: 12px; padding: 1.75rem; box-shadow: 0 10px 25px rgba(30, 35, 48, 0.1); }
		.card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
		.card p { margin: 0 0 1.25rem; line-height: 1.5; }
		.card a { display: inline-block; padding: 0.6rem 1.25rem; border-radius: 999px; background: #5865f2; color: #fff; text-decoration: none; font-weight: bold; }
		.card a:hover { background: #4752c4; }
    .card ul {
      padding-inline-start: 20px;
    }
	</style>
</head>
<body>
	<main>
		<h1>tinyReactive Samples</h1>
    <p>Code for all samples can be seen from browser devtools. Its not minimized or bundled.</p>
		<section class="samples">
			<article class="card">
				<h2>Minimal - <span>counter increment</span></h2>
        <ul>
          <li>Simple HTML+js imports tinyReactive with &lt;script&gt;.</li>
          <li>Creates a store with a single counter property, with a single subscription.</li>
        </ul>
				<a href="samples/minimal/index.html">Open counter app</a>
			</article>
			<article class="card">
				<h2>Full - <span>tasks app</span></h2>
        <ul>
          <li>Notifications pane shows state change events dispatched to subscribers.</li>
          <li>Imports the store as an ES6 module.</li>
          <li>Saves and restores store state from local storage.</li>
          <li>Subscribes multiple components to different parts of the same state object.</li>
        </ul>
				<a href="samples/tasks-app/src/index.html">Open tasks app</a>
			</article>
		</section>
	</main>
</body>
</html>