Feat: website WIP and new words

website/public/script.js

@@ -14,65 +14,28 @@ toggle.addEventListener('click', () => {
     const light = root.classList.contains('light');
     toggle.textContent = light ? 'DARK' : 'LIGHT';
     localStorage.setItem('theme', light ? 'light' : 'dark');
-    highlightForth();
 });
 
-function highlightForth() {
-    const words = ['note', 'sound', 'lpf', 'hpf', 'chorus', 'verb', 'distort', 'speed'];
-    const notes = ['c4'];
-    const chords = ['min7'];
-    const samples = ['kkick', 'sine', 'saw'];
-    const isLight = document.documentElement.classList.contains('light');
-    const numColor = isLight ? '#a855f7' : '#e8a0e8';
-    const dotColor = isLight ? '#0284c7' : '#7dd3fc';
-    const wordColor = isLight ? '#65a30d' : '#a3e635';
-    const noteColor = isLight ? '#d97706' : '#fbbf24';
-    const chordColor = isLight ? '#15803d' : '#4ade80';
-    const sampleColor = isLight ? '#dc2626' : '#f87171';
-    document.querySelectorAll('pre').forEach(pre => {
-        const text = pre.dataset.source || pre.textContent;
-        pre.dataset.source = text;
-        pre.innerHTML = text
-            .split(/(\s+)/)
-            .map(t => {
-                if (t === '.') return `<span style="color:${dotColor}">.</span>`;
-                if (/^-?\d+\.?\d*$/.test(t)) return `<span style="color:${numColor}">${t}</span>`;
-                if (words.includes(t)) return `<span style="color:${wordColor}">${t}</span>`;
-                if (notes.includes(t)) return `<span style="color:${noteColor}">${t}</span>`;
-                if (chords.includes(t)) return `<span style="color:${chordColor}">${t}</span>`;
-                if (samples.includes(t)) return `<span style="color:${sampleColor}">${t}</span>`;
-                return t;
-            })
-            .join('');
-    });
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', highlightForth);
-} else {
-    highlightForth();
-}
-
-const kofiModal = document.getElementById('kofi-modal');
-const kofiFrame = document.getElementById('kofi-frame');
-
-document.querySelectorAll('.downloads-table a').forEach(link => {
-    link.addEventListener('click', () => {
-        if (sessionStorage.getItem('kofi-dismissed')) return;
-        kofiFrame.src = 'https://ko-fi.com/raphaelbubo/?hidefeed=true&widget=true&embed=true';
-        kofiModal.showModal();
+document.querySelectorAll('.example-cell').forEach(cell => {
+    cell.addEventListener('click', () => {
+        const video = cell.querySelector('video');
+        const wasExpanded = cell.classList.contains('expanded');
+        document.querySelectorAll('.example-cell.expanded').forEach(c => {
+            c.classList.remove('expanded');
+            c.querySelector('video').pause();
+        });
+        if (!wasExpanded) {
+            cell.classList.add('expanded');
+            video.play();
+        }
     });
 });
 
-kofiModal.addEventListener('close', () => {
-    sessionStorage.setItem('kofi-dismissed', '1');
-    kofiFrame.src = 'about:blank';
-});
-
-document.getElementById('kofi-close').addEventListener('click', () => {
-    kofiModal.close();
-});
-
-kofiModal.addEventListener('click', (e) => {
-    if (e.target === kofiModal) kofiModal.close();
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.example-cell.expanded').forEach(c => {
+            c.classList.remove('expanded');
+            c.querySelector('video').pause();
+        });
+    }
 });