|
28 | 28 | <link rel=" stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" /> |
29 | 29 | </head> |
30 | 30 | <body> |
31 | | - <div id="app"> |
32 | | - <aside id="sidebar" class="sidebar"> |
33 | | - <h2>Equations</h2> |
34 | | - <nav id="equation-selector" class="equation-selector"></nav> |
35 | | - |
36 | | - <footer class="sidebar-footer"> |
37 | | - <p> |
38 | | - Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> |
39 | | - </p> |
40 | | - <p> |
41 | | - Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a> |
42 | | - </p> |
43 | | - <p> |
44 | | - For more on interactive explanations, see: |
45 | | - <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a> |
46 | | - </p> |
47 | | - </footer> |
48 | | - </aside> |
49 | | - |
50 | | - <main id="main-content" class="main-content"> |
51 | | - <h1 id="equation-title">Interactive Equations</h1> |
52 | | - <p class="subtitle">Hover over colored terms to explore their meaning</p> |
53 | | - |
54 | | - <div id="color-scheme-switcher" class="color-scheme-switcher"></div> |
55 | | - |
56 | | - <div id="equation-container"></div> |
57 | | - |
58 | | - <div id="static-description" class="static-description"></div> |
59 | | - |
60 | | - <div id="hover-explanation" class="hover-explanation"></div> |
61 | | - </main> |
62 | | - |
63 | | - <aside id="editor-sidebar" class="editor-sidebar"> |
64 | | - <div class="editor-toolbar"> |
65 | | - <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor"> |
66 | | - <span class="icon">◀</span> |
67 | | - </button> |
68 | | - <div class="export-controls"> |
69 | | - <select id="export-format" class="toolbar-select" title="Export as..."> |
70 | | - <option value="" disabled selected>Export as...</option> |
71 | | - <option value="html">HTML</option> |
72 | | - <option value="latex">LaTeX</option> |
73 | | - <option value="beamer">Beamer</option> |
74 | | - <option value="typst">Typst</option> |
75 | | - </select> |
76 | | - </div> |
77 | | - <button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button> |
78 | | - <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a> |
79 | | - </div> |
80 | | - <div id="editor-container" class="editor-container"></div> |
81 | | - </aside> |
82 | | - </div> |
| 31 | + <div id="app"></div> |
83 | 32 | <script type="module" src="/src/main.ts"></script> |
84 | 33 | </body> |
85 | 34 | </html> |
0 commit comments