dynamic-interactive-visualizations/index.html at main · KoalaColo99/dynamic-interactive-visualizations · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dynamic Interactive Visualizations</title>
  <style>
    :root {
      --ink: #111827;
      --muted: #64748b;
      --line: #d8dde5;
      --blue: #3f82f3;
      --green: #4caf57;
      --surface: #ffffff;
      --soft: #f6f8fb;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: #ffffff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.45;
    }

    main {
      width: min(100% - 40px, 1120px);
      margin: 0 auto;
      padding: 56px 0;
    }

    header {
      margin-bottom: 42px;
    }

    h1 {
      margin: 0 0 14px;
      max-width: 850px;
      font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .intro {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
      font-size: clamp(1.08rem, 0.95rem + 0.6vw, 1.35rem);
    }

    .section {
      padding: 30px 0;
      border-top: 1px solid var(--line);
    }

    h2 {
      margin: 0 0 18px;
      font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
      letter-spacing: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .card {
      display: grid;
      min-height: 220px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: inherit;
      background: var(--surface);
      text-decoration: none;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }

    .card:hover {
      border-color: var(--blue);
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 1.35rem;
      letter-spacing: 0;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
    }

    .preview {
      align-self: end;
      margin-top: 22px;
      padding: 18px;
      border-radius: 8px;
      background: var(--soft);
    }

    .mini-chart {
      width: 100%;
      aspect-ratio: 2.3;
    }

    .empty {
      min-height: 160px;
      padding: 22px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: #fbfcfe;
    }

    @media (max-width: 700px) {
      main {
        width: min(100% - 24px, 1120px);
        padding-top: 36px;
      }
    }
  </style>
</head>
<body>
  <main>
    <header>
      <h1>Dynamic Interactive Visualizations</h1>
      <p class="intro">Browser-based teaching figures for general chemistry, organic chemistry, and biochemistry. Each visualization is built to be shared live, linked from slides, and reused across lessons.</p>
    </header>

    <section class="section" aria-labelledby="general-chemistry">
      <h2 id="general-chemistry">General Chemistry</h2>
      <div class="grid">
        <a class="card" href="general-chemistry/activation-energy/">
          <div>
            <h3>Activation Energy and Catalysts</h3>
            <p>Move the catalyst-effectiveness slider to show that the catalyzed pathway changes while ΔG and the uncatalyzed path stay fixed.</p>
          </div>
          <div class="preview" aria-hidden="true">
            <svg class="mini-chart" viewBox="0 0 420 180">
              <line x1="24" y1="145" x2="396" y2="145" stroke="#d8dde5" stroke-width="2"/>
              <line x1="24" y1="145" x2="24" y2="22" stroke="#d8dde5" stroke-width="2"/>
              <path d="M62 105 H115 L205 45 L300 132 H354" fill="none" stroke="#3f82f3" stroke-width="7"/>
              <path d="M62 105 H115 L180 82 L225 118 L270 76 L300 132 H354" fill="none" stroke="#86ca9a" stroke-width="6" stroke-dasharray="9 8"/>
              <circle cx="270" cy="76" r="7" fill="#fff" stroke="#4caf57" stroke-width="4"/>
            </svg>
          </div>
        </a>
      </div>
    </section>

    <section class="section" aria-labelledby="organic-chemistry">
      <h2 id="organic-chemistry">Organic Chemistry</h2>
      <div class="empty">Visualizations will live here as the collection grows.</div>
    </section>

    <section class="section" aria-labelledby="biochemistry">
      <h2 id="biochemistry">Biochemistry</h2>
      <div class="empty">Visualizations will live here as the collection grows.</div>
    </section>
  </main>
</body>
</html>