Feat: lots of improvements
|
Before Width: | Height: | Size: 926 KiB |
BIN
website/public/eight_pic.webp
Normal file
|
After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 941 KiB |
BIN
website/public/fifth_pic.webp
Normal file
|
After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 887 KiB |
BIN
website/public/fourth_pic.webp
Normal file
|
After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 805 KiB |
BIN
website/public/ninth_pic.webp
Normal file
|
After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 925 KiB |
BIN
website/public/one_pic.webp
Normal file
|
After Width: | Height: | Size: 67 KiB |
@@ -1,21 +1,3 @@
|
||||
const toggle = document.getElementById('theme-toggle');
|
||||
const root = document.documentElement;
|
||||
const stored = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isLight = stored ? stored === 'light' : !prefersDark;
|
||||
|
||||
if (isLight) {
|
||||
root.classList.add('light');
|
||||
}
|
||||
toggle.textContent = isLight ? 'DARK' : 'LIGHT';
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('light');
|
||||
const light = root.classList.contains('light');
|
||||
toggle.textContent = light ? 'DARK' : 'LIGHT';
|
||||
localStorage.setItem('theme', light ? 'light' : 'dark');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.example-cell').forEach(cell => {
|
||||
cell.addEventListener('click', () => {
|
||||
const video = cell.querySelector('video');
|
||||
@@ -45,6 +27,10 @@ document.querySelectorAll('.feature-tags button').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('kofi-close').addEventListener('click', () => {
|
||||
document.getElementById('kofi-popup').style.display = 'none';
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.example-cell.expanded').forEach(c => {
|
||||
|
||||
|
Before Width: | Height: | Size: 833 KiB |
BIN
website/public/second_pic.webp
Normal file
|
After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 842 KiB |
BIN
website/public/seventh_pic.webp
Normal file
|
After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 870 KiB |
BIN
website/public/sixth_pic.webp
Normal file
|
After Width: | Height: | Size: 55 KiB |
@@ -6,14 +6,6 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #000;
|
||||
--surface: #121212;
|
||||
--text: #fff;
|
||||
--text-dim: #b4b4b4;
|
||||
--text-muted: #787878;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--bg: #fff;
|
||||
--surface: #f0f0f0;
|
||||
--text: #000;
|
||||
@@ -216,6 +208,51 @@ li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kofi-popup {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 50;
|
||||
max-width: 14rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--text-muted);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.kofi-popup p {
|
||||
margin: 0 0 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.kofi-popup a {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.kofi-popup a:hover {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.kofi-close {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.5rem;
|
||||
font-family: 'VCR OSD Mono', monospace;
|
||||
font-size: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kofi-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.colophon {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1rem;
|
||||
@@ -227,17 +264,3 @@ li {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
font-family: 'VCR OSD Mono', monospace;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 835 KiB |
BIN
website/public/third_pic.webp
Normal file
|
After Width: | Height: | Size: 50 KiB |
@@ -1,4 +1,7 @@
|
||||
---
|
||||
import fs from 'node:fs';
|
||||
const cargo = fs.readFileSync('../Cargo.toml', 'utf-8');
|
||||
const version = cargo.match(/\[workspace\.package\]\s*\nversion\s*=\s*"([^"]+)"/)?.[1];
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -23,24 +26,29 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="kofi-popup" id="kofi-popup">
|
||||
<button class="kofi-close" id="kofi-close" aria-label="Close">×</button>
|
||||
<p>Consider donating, I need to buy some coffee! Donations help me to rent servers and to secure funding for working on software.</p>
|
||||
<a href="https://ko-fi.com/raphaelbubo" target="_blank" rel="noopener">Support on Ko-fi</a>
|
||||
</div>
|
||||
<header>
|
||||
<img class="icon" src="/Cagire.png" alt="Cagire">
|
||||
<div>
|
||||
<h1>CAGIRE: LIVE CODING IN FORTH</h1>
|
||||
<p class="subtitle">AGPL-3.0 · Raphaël Maurice Forment · 2026</p>
|
||||
<p class="subtitle">AGPL-3.0 · Raphaël Maurice Forment · 2026 · v{version}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-cell"><img src="/one_pic.png" alt="Cagire screenshot 1"></div>
|
||||
<div class="example-cell"><img src="/second_pic.png" alt="Cagire screenshot 2"></div>
|
||||
<div class="example-cell"><img src="/third_pic.png" alt="Cagire screenshot 3"></div>
|
||||
<div class="example-cell"><img src="/fourth_pic.png" alt="Cagire screenshot 4"></div>
|
||||
<div class="example-cell"><img src="/fifth_pic.png" alt="Cagire screenshot 5"></div>
|
||||
<div class="example-cell"><img src="/sixth_pic.png" alt="Cagire screenshot 6"></div>
|
||||
<div class="example-cell"><img src="/seventh_pic.png" alt="Cagire screenshot 7"></div>
|
||||
<div class="example-cell"><img src="/eight_pic.png" alt="Cagire screenshot 8"></div>
|
||||
<div class="example-cell"><img src="/ninth_pic.png" alt="Cagire screenshot 9"></div>
|
||||
<div class="example-cell"><img src="/one_pic.webp" alt="Cagire screenshot 1"></div>
|
||||
<div class="example-cell"><img src="/second_pic.webp" alt="Cagire screenshot 2"></div>
|
||||
<div class="example-cell"><img src="/third_pic.webp" alt="Cagire screenshot 3"></div>
|
||||
<div class="example-cell"><img src="/fourth_pic.webp" alt="Cagire screenshot 4"></div>
|
||||
<div class="example-cell"><img src="/fifth_pic.webp" alt="Cagire screenshot 5"></div>
|
||||
<div class="example-cell"><img src="/sixth_pic.webp" alt="Cagire screenshot 6"></div>
|
||||
<div class="example-cell"><img src="/seventh_pic.webp" alt="Cagire screenshot 7"></div>
|
||||
<div class="example-cell"><img src="/eight_pic.webp" alt="Cagire screenshot 8"></div>
|
||||
<div class="example-cell"><img src="/ninth_pic.webp" alt="Cagire screenshot 9"></div>
|
||||
</div>
|
||||
|
||||
<h2>Download</h2>
|
||||
@@ -109,8 +117,7 @@
|
||||
<video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
|
||||
|
||||
<p class="colophon">
|
||||
<a href="https://raphaelforment.fr">BuboBubo</a> · Audio engine: <a href="https://doux.livecoding.fr">Doux</a> · <a href="https://github.com/Bubobubobubobubo/cagire">GitHub</a> · AGPL-3.0 · <button id="theme-toggle" aria-label="Toggle theme">LIGHT</button>
|
||||
</p>
|
||||
<a href="https://raphaelforment.fr">BuboBubo</a> · Audio engine: <a href="https://doux.livecoding.fr">Doux</a> · <a href="https://github.com/Bubobubobubobubo/cagire">GitHub</a> · AGPL-3.0 </p>
|
||||
|
||||
<script is:inline src="/script.js"></script>
|
||||
</body>
|
||||
|
||||