summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2026-04-18 16:57:02 +0300
committerPaul Buetow <paul@buetow.org>2026-04-18 16:57:02 +0300
commitc96b991081fa56aad043f39ab85c4862db7d86d6 (patch)
tree83384833e6a47fbc4ebf790a19030743873d6522
parenta51083fe1a2b9a03f3c3139a2927a1f3ec22d44a (diff)
Add retrofuture themev0.4.0
Diffstat
-rw-r--r--internal/generator/templates/themes/retrofuture.tmpl299
-rw-r--r--internal/generator/templates/themes/spaceage.tmpl282
-rw-r--r--internal/generator/theme_sounds.go35
-rw-r--r--internal/version/version.go2
4 files changed, 605 insertions, 13 deletions
diff --git a/internal/generator/templates/themes/retrofuture.tmpl b/internal/generator/templates/themes/retrofuture.tmpl
new file mode 100644
index 0000000..3d94731
--- /dev/null
+++ b/internal/generator/templates/themes/retrofuture.tmpl
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>snonux.foo ◈ RETROFUTURE</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+ <style>
+ :root { --pink:#ff6b9d; --purple:#00d9c0; --orange:#ff8c42; --bg:#0a0121; }
+ * { margin:0; padding:0; box-sizing:border-box; }
+ body { font-family:'Share Tech Mono',monospace; background:var(--bg);
+ color:#f0efe4; overflow:hidden; height:100vh; }
+ #three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
+ .overlay { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; }
+ header { padding:16px 28px; background:rgba(10,1,33,0.85); backdrop-filter:blur(12px);
+ border-bottom:2px solid var(--pink); display:flex; align-items:center; justify-content:space-between; }
+ .logo { display:flex; align-items:center; gap:14px; }
+ .logo-mark { font-size:1.8rem; font-family:'Orbitron',sans-serif; color:var(--purple);
+ text-shadow:0 0 12px var(--purple),0 0 28px rgba(0,217,192,0.4); }
+ .logo-title h1 { font-size:1.7rem; font-family:'Orbitron',sans-serif; color:#f0efe4;
+ letter-spacing:3px; text-shadow:0 0 8px rgba(255,255,255,0.2); }
+ .logo-title .subtitle { font-size:0.7rem; color:rgba(240,239,228,0.55); margin-top:2px;
+ font-family:'Share Tech Mono',monospace; }
+ .logo-title .subtitle a { color:var(--pink); text-decoration:none; }
+ .logo-title .subtitle a:hover { text-shadow:0 0 8px var(--pink); }
+ .logo-title .logo-host { font-size:0.65rem; color:rgba(0,217,192,0.6); margin-top:2px;
+ font-family:'Share Tech Mono',monospace; }
+ .transmit-btn { border:2px solid var(--orange); color:var(--orange); padding:10px 22px;
+ border-radius:22px; text-decoration:none; letter-spacing:1px;
+ font-size:0.88rem; font-family:'Orbitron',sans-serif; transition:all 0.2s; }
+ .transmit-btn:hover { background:var(--orange); color:var(--bg); box-shadow:0 0 18px rgba(255,140,66,0.5); }
+ a.header-feed-link { color:var(--pink); font-family:'Share Tech Mono',monospace; }
+ .nav-hints { background:rgba(10,1,33,0.75); border-bottom:1px solid rgba(0,217,192,0.25);
+ color:rgba(240,239,228,0.45); padding:5px 20px; display:flex; gap:18px;
+ font-size:0.68rem; font-family:'Share Tech Mono',monospace; flex-wrap:wrap; }
+ .nav-hints kbd { background:rgba(0,217,192,0.12); border:1px solid rgba(0,217,192,0.45);
+ color:var(--purple); border-radius:3px; padding:0 5px; margin:0 2px; font-size:0.7rem; }
+ .content { flex:1; overflow-y:auto; padding:22px 28px;
+ scrollbar-width:thin; scrollbar-color:var(--purple) var(--bg); }
+ .page-nav { display:flex; justify-content:center; margin:14px 0; }
+ .page-nav a { border:2px solid var(--pink); color:var(--pink); padding:8px 22px;
+ border-radius:22px; text-decoration:none; letter-spacing:2px; font-size:0.82rem;
+ font-family:'Orbitron',sans-serif; transition:all 0.2s; }
+ .page-nav a:hover { background:var(--pink); color:var(--bg); }
+ .page-nav-footer { flex-shrink:0; padding:8px 28px; display:flex; justify-content:center;
+ background:rgba(10,1,33,0.82); backdrop-filter:blur(10px);
+ border-top:2px solid var(--pink); }
+ .post { background:rgba(20,10,55,0.85); border:1px solid rgba(0,217,192,0.3);
+ border-radius:12px; padding:22px; margin-bottom:18px; cursor:pointer; transition:all 0.25s;
+ box-shadow:0 2px 16px rgba(0,0,0,0.4); }
+ .post:hover { border-color:var(--pink); box-shadow:0 0 22px rgba(255,107,157,0.3),0 4px 24px rgba(0,0,0,0.5); transform:translateY(-3px); }
+ .post-active { border-color:var(--orange) !important; background:rgba(30,15,60,0.96) !important;
+ box-shadow:0 0 22px rgba(255,140,66,0.4),inset 3px 0 0 var(--orange) !important; }
+ .post-header { display:flex; justify-content:space-between; margin-bottom:14px; }
+ .post-time { color:var(--orange); font-family:'Share Tech Mono',monospace; font-size:0.85rem; }
+ .post-text { line-height:1.6; font-size:0.95rem; font-family:'Share Tech Mono',monospace; }
+ .post-text a { color:var(--pink); text-decoration:none; }
+ .post-audio { width:100%; margin-top:10px; }
+ .post-modal { display:none; position:fixed; inset:0; z-index:100;
+ background:rgba(10,1,33,0.96); overflow-y:auto; padding:40px 20px; }
+ .post-modal.active { display:block; }
+ .modal-inner { max-width:780px; margin:0 auto; background:rgba(20,10,55,0.98);
+ border:2px solid var(--pink); border-radius:12px;
+ box-shadow:0 0 60px rgba(255,107,157,0.25); padding:38px; }
+ .modal-close { float:right; background:none; border:none; color:var(--orange);
+ font-family:'Orbitron',sans-serif; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} }
+ .splash-overlay.splash-retrofuture {
+ background: radial-gradient(ellipse at 50% 60%, #1a0840 0%, var(--bg) 55%, #050010 100%);
+ }
+ .splash-retrofuture .splash-starburst {
+ position:absolute; inset:0; pointer-events:none; z-index:1;
+ }
+ .splash-retrofuture .splash-starburst span {
+ position:absolute; top:50%; left:50%; width:3px; height:3px;
+ border-radius:50%; background:var(--pink); opacity:0.5;
+ box-shadow:0 0 6px var(--pink);
+ animation: starTwinkle 3s ease-in-out infinite;
+ }
+ @keyframes starTwinkle {
+ 0%,100%{opacity:0.3;transform:scale(1);}
+ 50%{opacity:0.8;transform:scale(1.4);}
+ }
+ .splash-retrofuture .splash-atomic {
+ width:min(100px,22vw); height:min(100px,22vw); margin:0 auto 1rem;
+ border-radius:50%; border:3px solid var(--purple);
+ box-shadow:0 0 20px var(--purple),0 0 40px rgba(0,217,192,0.3),inset 0 0 20px rgba(0,217,192,0.15);
+ position:relative; animation:splashAtomicPulse 2.5s ease-in-out infinite alternate;
+ }
+ .splash-retrofuture .splash-atomic::before,
+ .splash-retrofuture .splash-atomic::after {
+ content:''; position:absolute; border:2px solid var(--purple); border-radius:50%;
+ top:50%; left:50%; transform:translate(-50%,-50%);
+ }
+ .splash-retrofuture .splash-atomic::before {
+ width:160%; height:30%; opacity:0.7;
+ box-shadow:0 0 10px var(--purple);
+ }
+ .splash-retrofuture .splash-atomic::after {
+ width:30%; height:160%; opacity:0.7;
+ box-shadow:0 0 10px var(--purple);
+ }
+ @keyframes splashAtomicPulse {
+ from{transform:scale(0.95);box-shadow:0 0 15px var(--purple),0 0 30px rgba(0,217,192,0.2),inset 0 0 15px rgba(0,217,192,0.1);}
+ to{transform:scale(1.05);box-shadow:0 0 25px var(--purple),0 0 50px rgba(0,217,192,0.4),inset 0 0 25px rgba(0,217,192,0.2);}
+ }
+ .splash-retrofuture .splash-title {
+ font-family:'Orbitron',sans-serif; font-size:clamp(1.4rem,4.5vw,2rem);
+ color:#f0efe4; letter-spacing:4px; text-shadow:0 0 20px rgba(255,107,157,0.6);
+ }
+ .splash-retrofuture .splash-tag { font-family:'Share Tech Mono',monospace; color:var(--purple); }
+ .splash-retrofuture .splash-hint { font-family:'Share Tech Mono',monospace; color:rgba(240,239,228,0.8); }
+ .splash-retrofuture .splash-inner { text-shadow:0 2px 24px rgba(10,1,33,0.9); }
+{{template "navSharedCSSInner"}}
+ </style>
+</head>
+<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-retrofuture" role="dialog" aria-modal="true" aria-label="Open microblog" tabindex="-1">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-starburst" aria-hidden="true">
+ <span style="top:15%;left:20%;animation-delay:0s"></span>
+ <span style="top:25%;left:75%;animation-delay:0.4s"></span>
+ <span style="top:60%;left:10%;animation-delay:0.8s"></span>
+ <span style="top:70%;left:85%;animation-delay:1.2s"></span>
+ <span style="top:40%;left:50%;animation-delay:1.6s"></span>
+ <span style="top:80%;left:35%;animation-delay:0.2s"></span>
+ <span style="top:10%;left:60%;animation-delay:1.0s"></span>
+ <span style="top:55%;left:90%;animation-delay:0.6s"></span>
+ </div>
+ <div class="splash-inner">
+ <div class="splash-atomic" aria-hidden="true"></div>
+ <div class="splash-title">snonux.foo</div>
+ <div class="splash-tag">Atomic age uplink</div>
+ <div class="splash-hint">Click or Enter to tune in</div>
+ </div>
+ </div>
+ <script>
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(58,1,0.1,120);ca.position.set(0,1.2,7);
+ var atomic=new THREE.Mesh(new THREE.SphereGeometry(1.35,28,28),new THREE.MeshBasicMaterial({color:0x00d9c0,transparent:true,opacity:0.9}));
+ atomic.position.y=0;g.add(atomic);
+ var ringH=new THREE.Mesh(new THREE.TorusGeometry(2.1,0.06,8,64),new THREE.MeshBasicMaterial({color:0xff6b9d,transparent:true,opacity:0.8}));
+ g.add(ringH);
+ var ringV=new THREE.Mesh(new THREE.TorusGeometry(2.1,0.06,8,64),new THREE.MeshBasicMaterial({color:0xff6b9d,transparent:true,opacity:0.8}));
+ ringV.rotation.x=Math.PI/2;g.add(ringV);
+ var gr=new THREE.Mesh(new THREE.PlaneGeometry(28,28,20,20),new THREE.MeshBasicMaterial({color:0x00d9c0,wireframe:true,transparent:true,opacity:0.25}));
+ gr.rotation.x=-Math.PI/2.4;gr.position.y=-2.8;g.add(gr);
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=Math.sin(t*0.3)*0.12;atomic.position.y=Math.sin(t*1.1)*0.12;ringH.scale.setScalar(1+Math.sin(t*2.2)*0.06);ringV.scale.setScalar(1+Math.cos(t*2.2)*0.06);ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
+ <canvas id="three-canvas"></canvas>
+ <div class="overlay">
+ <header>
+ <div class="logo">
+ <span class="logo-mark">SN</span>
+ <div class="logo-title">
+ <h1>snonux.foo</h1>
+ <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+ <p class="logo-host">Served by NetBSD on a Raspberry Pi 3</p>
+ </div>
+ </div>
+ <div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
+ <a href="https://foo.zone/about" class="transmit-btn">TRANSMIT TO NEXUS</a>
+ </div>
+ </header>
+ {{template "navhints" .}}
+ <div class="content" id="post-content">
+ {{range $i, $post := .Posts}}
+ <div class="post" id="post-{{$post.ID}}" data-index="{{$i}}">
+ <div class="post-header">
+ <div><strong>@snonux</strong></div>
+ <div class="post-time">{{$post.FormattedTime}}</div>
+ </div>
+ <div class="post-text">{{$post.ContentHTML}}</div>
+ </div>
+ {{end}}
+ </div>
+ {{if or .PrevPage .NextPage}}
+ <footer class="page-nav-footer" aria-label="Pagination">
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER &rarr;</a>{{end}}
+ </div>
+ </footer>
+ {{end}}
+ </div>
+ {{template "navmodal" .}}
+ <script>
+ // Retrofuture WebGL: atomic orb with crossed electron rings, receding teal grid floor,
+ // chrome metallic star particles, and a slow drifting camera orbit.
+ (function() {
+ var scene, camera, renderer, clock;
+ var atomic, ringH, ringV, stars;
+
+ function initThree() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x0a0121);
+ scene.fog = new THREE.Fog(0x0a0121, 60, 180);
+
+ camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 300);
+ camera.position.set(0, 10, 45);
+ camera.lookAt(0, -5, -10);
+
+ renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+ clock = new THREE.Clock();
+
+ // Glowing atomic teal orb
+ atomic = new THREE.Mesh(
+ new THREE.SphereGeometry(12, 32, 16),
+ new THREE.MeshBasicMaterial({ color: 0x00d9c0 })
+ );
+ atomic.position.set(0, -8, -55);
+ scene.add(atomic);
+
+ // Horizontal electron ring — pink
+ ringH = new THREE.Mesh(
+ new THREE.TorusGeometry(15, 0.15, 8, 64),
+ new THREE.MeshBasicMaterial({ color: 0xff6b9d })
+ );
+ ringH.position.copy(atomic.position);
+ scene.add(ringH);
+
+ // Vertical electron ring — coral
+ ringV = new THREE.Mesh(
+ new THREE.TorusGeometry(15, 0.15, 8, 64),
+ new THREE.MeshBasicMaterial({ color: 0xff8c42 })
+ );
+ ringV.position.copy(atomic.position);
+ ringV.rotation.x = Math.PI / 2;
+ scene.add(ringV);
+
+ // Receding grid floor — teal
+ var grid = new THREE.GridHelper(200, 40, 0x00d9c0, 0x1a0840);
+ grid.position.set(0, -18, -30);
+ scene.add(grid);
+
+ // 1200 chrome star particles scattered in a sphere shell
+ var starPos = new Float32Array(1200 * 3);
+ for (var j = 0; j < 1200 * 3; j += 3) {
+ var r = 80 + Math.random() * 40;
+ var theta = Math.random() * Math.PI * 2;
+ var phi = Math.acos(2 * Math.random() - 1);
+ starPos[j] = r * Math.sin(phi) * Math.cos(theta);
+ starPos[j+1] = r * Math.sin(phi) * Math.sin(theta);
+ starPos[j+2] = r * Math.cos(phi);
+ }
+ var starGeo = new THREE.BufferGeometry();
+ starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
+ scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({
+ color: 0xffd700, size: 0.22, transparent: true, opacity: 0.8
+ })));
+
+ window.addEventListener('resize', onResize);
+ animate();
+ }
+
+ function onResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+ var t = clock.getElapsedTime();
+ // Atomic orb pulses subtly; rings counter-rotate
+ var pulse = 1 + 0.015 * Math.sin(t * 1.5);
+ atomic.scale.setScalar(pulse);
+ ringH.rotation.z = t * 0.4;
+ ringV.rotation.z = -t * 0.3;
+ // Slow camera orbit for parallax
+ camera.position.x = Math.sin(t * 0.07) * 5;
+ camera.position.y = 10 + Math.sin(t * 0.05) * 2;
+ camera.lookAt(0, -5, -10);
+ renderer.render(scene, camera);
+ }
+
+ initThree();
+ })();
+ </script>
+ {{template "navscript" .}}
+</body>
+</html> \ No newline at end of file
diff --git a/internal/generator/templates/themes/spaceage.tmpl b/internal/generator/templates/themes/spaceage.tmpl
new file mode 100644
index 0000000..5841444
--- /dev/null
+++ b/internal/generator/templates/themes/spaceage.tmpl
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>SNONUX.FOO // SPACE AGE</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+ <style>
+ :root { --teal:#00e8e8; --dim:#1a4455; --red:#ff3320; --silver:#c8d8e0; --bg:#030a0f; --bg2:#020608; }
+ * { margin:0; padding:0; box-sizing:border-box; }
+ body { font-family:'Space Mono','Courier New',monospace; background:var(--bg); color:var(--silver);
+ overflow:hidden; height:100vh; }
+ /* Subtle horizontal scanlines — lighter than retro, cleaner space feel */
+ body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none;
+ background:repeating-linear-gradient(0deg,transparent,transparent 3px,
+ rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px); }
+ #three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
+ .overlay { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; }
+ header { padding:12px 24px; background:rgba(2,6,8,0.88); backdrop-filter:blur(8px);
+ border-bottom:2px solid var(--teal);
+ display:flex; align-items:center; justify-content:space-between; }
+ .logo { display:flex; align-items:center; gap:14px; }
+ .logo-mark { font-size:1.5rem; color:var(--teal); text-shadow:0 0 18px var(--teal);
+ letter-spacing:3px; font-weight:700; }
+ .logo-title h1 { font-size:1.1rem; color:var(--teal); text-shadow:0 0 12px var(--teal);
+ letter-spacing:5px; font-weight:700; }
+ .logo-title .subtitle { font-size:0.68rem; color:var(--dim); margin-top:3px; letter-spacing:1px; }
+ .logo-title .subtitle a { color:var(--teal); text-decoration:none; opacity:0.8; }
+ .logo-title .subtitle a:hover { opacity:1; text-shadow:0 0 6px var(--teal); }
+ /* HAL eye: red dot beside the transmit button */
+ .transmit-btn { position:relative; border:1px solid var(--teal); color:var(--teal); padding:8px 18px;
+ text-decoration:none; font-size:0.78rem; letter-spacing:3px;
+ transition:all 0.15s; }
+ .transmit-btn::before { content:'●'; color:var(--red); text-shadow:0 0 8px var(--red);
+ position:absolute; left:-18px; top:50%; transform:translateY(-50%);
+ font-size:0.65rem; animation:hal-blink 4s ease-in-out infinite; }
+ @keyframes hal-blink { 0%,90%,100%{opacity:1} 95%{opacity:0.2} }
+ .transmit-btn:hover { background:var(--teal); color:var(--bg); }
+ a.header-feed-link { color:var(--dim); font-size:0.78rem; letter-spacing:1px; }
+ a.header-feed-link:hover { color:var(--teal); }
+ .nav-hints { background:rgba(2,6,8,0.82); border-bottom:1px solid var(--dim);
+ color:var(--dim); padding:4px 24px; display:flex; gap:18px;
+ font-size:0.66rem; flex-wrap:wrap; letter-spacing:1px; }
+ .nav-hints kbd { background:transparent; border:1px solid var(--dim); color:var(--teal);
+ padding:0 5px; font-size:0.66rem; margin:0 2px; }
+ .content { flex:1; overflow-y:auto; padding:16px 24px;
+ scrollbar-width:thin; scrollbar-color:var(--dim) var(--bg); }
+ .page-nav { display:flex; justify-content:center; margin:12px 0; }
+ .page-nav a { border:1px solid var(--dim); color:var(--teal); padding:7px 22px;
+ text-decoration:none; font-size:0.78rem; letter-spacing:3px; }
+ .page-nav a:hover { background:var(--teal); color:var(--bg); border-color:var(--teal); }
+ .page-nav-footer { flex-shrink:0; padding:6px 24px; display:flex; justify-content:center;
+ background:rgba(2,6,8,0.88); backdrop-filter:blur(8px); border-top:2px solid var(--teal); }
+ .post { background:rgba(3,10,15,0.82); border:1px solid var(--dim); padding:16px 18px;
+ margin-bottom:10px; cursor:pointer; transition:border-color 0.2s, box-shadow 0.2s; }
+ .post:hover { border-color:var(--teal); box-shadow:0 0 12px rgba(0,232,232,0.18); }
+ .post-active { border-color:var(--teal) !important;
+ background:rgba(0,232,232,0.04) !important;
+ box-shadow:0 0 18px rgba(0,232,232,0.28),inset 3px 0 0 var(--teal) !important; }
+ .post-header { display:flex; justify-content:space-between; margin-bottom:10px; font-size:0.82rem; }
+ .post-time { color:var(--dim); font-size:0.75rem; letter-spacing:1px; }
+ .post-text { line-height:1.65; font-size:0.86rem; color:var(--silver); }
+ .post-text a { color:var(--teal); text-decoration:underline; }
+ .post-image { max-width:100%; margin-top:10px; border:1px solid var(--dim);
+ filter:saturate(0.85) brightness(0.92); }
+ .post-audio { width:100%; margin-top:10px; }
+ .post-modal { display:none; position:fixed; inset:0; z-index:100;
+ background:rgba(2,6,8,0.97); overflow-y:auto; padding:40px 20px; }
+ .post-modal.active { display:block; }
+ .modal-inner { max-width:740px; margin:0 auto; background:var(--bg);
+ border:1px solid var(--teal); padding:36px;
+ box-shadow:0 0 50px rgba(0,232,232,0.18); }
+ .modal-close { float:right; background:none; border:none; color:var(--dim);
+ font-family:'Space Mono',monospace; font-size:0.85rem; cursor:pointer; letter-spacing:3px; }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 16px;} }
+ /* Splash screen: space age orbital */
+ .splash-overlay.splash-spaceage { background:var(--bg); }
+ .splash-spaceage .splash-inner { position:relative; z-index:1; }
+ .splash-spaceage .splash-title {
+ font-family:'Space Mono',monospace; font-weight:700;
+ font-size:clamp(1.1rem,3.5vw,1.6rem); color:var(--teal);
+ text-shadow:0 0 20px var(--teal),0 0 40px rgba(0,232,232,0.4);
+ letter-spacing:0.35em;
+ animation: spaceagePulse 3s ease-in-out infinite;
+ }
+ @keyframes spaceagePulse { 0%,100%{text-shadow:0 0 20px var(--teal),0 0 40px rgba(0,232,232,0.4)} 50%{text-shadow:0 0 30px var(--teal),0 0 60px rgba(0,232,232,0.6)} }
+ .splash-spaceage .splash-tag { color:var(--silver); letter-spacing:2px; font-family:'Space Mono',monospace; font-size:0.78rem; }
+ .splash-spaceage .splash-hint { color:var(--dim); letter-spacing:2px; font-family:'Space Mono',monospace; font-size:0.72rem; }
+{{template "navSharedCSSInner"}}
+ </style>
+</head>
+<body>
+ {{template "splashGate"}}
+ <div id="splash-overlay" class="splash-overlay splash-spaceage" role="dialog" aria-modal="true" aria-label="Open microblog" tabindex="-1">
+ <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+ <div class="splash-inner">
+ <div class="splash-title">STARBASE SNONUX</div>
+ <div class="splash-tag">Orbital uplink established</div>
+ <div class="splash-hint">Press Enter or click to dock</div>
+ </div>
+ </div>
+ <script>
+ // Splash WebGL: slowly rotating torus (space station ring) + star field.
+ (function(){
+ if(document.documentElement.classList.contains('sno-splash-skip'))return;
+ var cv=document.getElementById('splash-gl-canvas');
+ if(!cv||typeof THREE==='undefined')return;
+ var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+ function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+ window._snonuxSplashWebGLCleanup=cleanup;
+ function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+ ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+ sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,60);ca.position.z=8;
+ // Torus ring — space station
+ var tor=new THREE.Mesh(new THREE.TorusGeometry(2.2,0.45,16,80),new THREE.MeshBasicMaterial({color:0x00e8e8,wireframe:true,transparent:true,opacity:0.85}));
+ g.add(tor);
+ // Inner hub
+ var hub=new THREE.Mesh(new THREE.SphereGeometry(0.38,12,12),new THREE.MeshBasicMaterial({color:0x00e8e8,wireframe:true,transparent:true,opacity:0.6}));
+ g.add(hub);
+ sc.add(g);sz();window.addEventListener('resize',sz);
+ function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.x=t*0.28;g.rotation.y=t*0.45;hub.rotation.z=t*1.1;ren.render(sc,ca);}
+ raf=requestAnimationFrame(loop);
+ })();
+ </script>
+ <canvas id="three-canvas"></canvas>
+ <div class="overlay">
+ <header>
+ <div class="logo">
+ <span class="logo-mark">[SN]</span>
+ <div class="logo-title">
+ <h1>SNONUX.FOO</h1>
+ <p class="subtitle">MICROBLOG / <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+ <p class="logo-host">Served by NetBSD on a Raspberry Pi 3</p>
+ </div>
+ </div>
+ <div class="nav">
+ <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
+ <a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
+ </div>
+ </header>
+ {{template "navhints" .}}
+ <div class="content" id="post-content">
+ {{range $i, $post := .Posts}}
+ <div class="post" id="post-{{$post.ID}}" data-index="{{$i}}">
+ <div class="post-header">
+ <div><strong>@SNONUX</strong></div>
+ <div class="post-time">{{$post.FormattedTime}}</div>
+ </div>
+ <div class="post-text">{{$post.ContentHTML}}</div>
+ </div>
+ {{end}}
+ </div>
+ {{if or .PrevPage .NextPage}}
+ <footer class="page-nav-footer" aria-label="Pagination">
+ <div class="page-nav page-nav-dual">
+ {{if .PrevPage}}<a href="{{.PrevPage}}">&lt;-- NEWER</a>{{end}}
+ {{if .NextPage}}<a href="{{.NextPage}}">OLDER --&gt;</a>{{end}}
+ </div>
+ </footer>
+ {{end}}
+ </div>
+ {{template "navmodal" .}}
+ <script>
+ // Space Age WebGL: toroidal space station ring + three satellite pods orbiting it
+ // + a slowly rotating planet sphere + dense star field. Teal wireframe throughout.
+ (function() {
+ var scene, camera, renderer, clock;
+ var station, pods = [], planet;
+
+ function initThree() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x030a0f);
+ scene.fog = new THREE.Fog(0x030a0f, 60, 160);
+
+ camera = new THREE.PerspectiveCamera(58, window.innerWidth / window.innerHeight, 0.1, 300);
+ camera.position.set(0, 14, 42);
+ camera.lookAt(0, 0, 0);
+
+ renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+ clock = new THREE.Clock();
+
+ var tealMat = new THREE.MeshBasicMaterial({ color: 0x00e8e8, wireframe: true });
+ var dimMat = new THREE.MeshBasicMaterial({ color: 0x1a4455, wireframe: true });
+ var silverMat= new THREE.MeshBasicMaterial({ color: 0xc8d8e0, wireframe: true, transparent: true, opacity: 0.55 });
+
+ // Main toroidal space station — the visual centrepiece
+ station = new THREE.Mesh(new THREE.TorusGeometry(14, 2.8, 20, 100), tealMat.clone());
+ scene.add(station);
+
+ // Central hub sphere
+ var hub = new THREE.Mesh(new THREE.SphereGeometry(2.2, 16, 16), dimMat.clone());
+ scene.add(hub);
+
+ // Three spoke arms from hub to ring
+ for (var s = 0; s < 3; s++) {
+ var angle = (s / 3) * Math.PI * 2;
+ var spoke = new THREE.Mesh(
+ new THREE.CylinderGeometry(0.12, 0.12, 14, 6),
+ dimMat.clone()
+ );
+ spoke.rotation.z = angle + Math.PI / 2;
+ spoke.position.set(Math.cos(angle) * 7, Math.sin(angle) * 7, 0);
+ scene.add(spoke);
+ }
+
+ // Three satellite pods orbiting the station on a wider ring
+ for (var p = 0; p < 3; p++) {
+ var pod = new THREE.Mesh(new THREE.OctahedronGeometry(1.1, 0), silverMat.clone());
+ pod._baseAngle = (p / 3) * Math.PI * 2;
+ pods.push(pod);
+ scene.add(pod);
+ }
+
+ // Distant planet — slowly rotating sphere
+ planet = new THREE.Mesh(
+ new THREE.SphereGeometry(9, 24, 24),
+ new THREE.MeshBasicMaterial({ color: 0x0a2a38, wireframe: true, transparent: true, opacity: 0.6 })
+ );
+ planet.position.set(-55, -18, -80);
+ scene.add(planet);
+
+ // 1500 star particles spread through deep space
+ var starPos = new Float32Array(1500 * 3);
+ for (var i = 0; i < 1500 * 3; i++) {
+ starPos[i] = (Math.random() - 0.5) * 220;
+ }
+ var starGeo = new THREE.BufferGeometry();
+ starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
+ scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({
+ color: 0xc8d8e0, size: 0.18, transparent: true, opacity: 0.65
+ })));
+
+ window.addEventListener('resize', onResize);
+ animate();
+ }
+
+ function onResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+ var t = clock.getElapsedTime();
+
+ // Station rotates slowly around Y and tilts slightly on X
+ station.rotation.y = t * 0.12;
+ station.rotation.x = Math.sin(t * 0.07) * 0.3;
+
+ // Satellite pods orbit on a wider radius than the station ring
+ for (var i = 0; i < pods.length; i++) {
+ var angle = pods[i]._baseAngle + t * 0.38;
+ pods[i].position.set(
+ Math.cos(angle) * 24,
+ Math.sin(angle * 0.6) * 5,
+ Math.sin(angle) * 24
+ );
+ pods[i].rotation.x = t * 0.7 + i;
+ pods[i].rotation.z = t * 0.5 + i;
+ }
+
+ // Planet drifts very slowly
+ planet.rotation.y = t * 0.04;
+
+ // Gentle camera drift for parallax
+ camera.position.x = Math.sin(t * 0.06) * 5;
+ camera.position.y = 14 + Math.sin(t * 0.09) * 2;
+
+ renderer.render(scene, camera);
+ }
+
+ initThree();
+ })();
+ </script>
+ {{template "navscript" .}}
+</body>
+</html>
diff --git a/internal/generator/theme_sounds.go b/internal/generator/theme_sounds.go
index 4876ab1..19d9711 100644
--- a/internal/generator/theme_sounds.go
+++ b/internal/generator/theme_sounds.go
@@ -38,18 +38,19 @@ type themeSounds struct {
// themeSoundPresets maps CLI theme names to synth parameters (see themes.go registry).
var themeSoundPresets = map[string]themeSounds{
- "neon": soundsNeon(),
- "terminal": soundsTerminal(),
- "synthwave": soundsSynthwave(),
- "plasma": soundsPlasma(),
- "brutalist": soundsBrutalist(),
- "volcano": soundsVolcano(),
- "aurora": soundsAurora(),
- "matrix": soundsMatrix(),
- "ocean": soundsOcean(),
- "dos": soundsDos(),
- "retro": soundsRetro(),
- "cosmos": soundsCosmos(),
+ "neon": soundsNeon(),
+ "terminal": soundsTerminal(),
+ "synthwave": soundsSynthwave(),
+ "plasma": soundsPlasma(),
+ "brutalist": soundsBrutalist(),
+ "volcano": soundsVolcano(),
+ "aurora": soundsAurora(),
+ "matrix": soundsMatrix(),
+ "ocean": soundsOcean(),
+ "dos": soundsDos(),
+ "retro": soundsRetro(),
+ "cosmos": soundsCosmos(),
+ "retrofuture": soundsRetrofuture(),
}
func soundsNeon() themeSounds {
@@ -172,6 +173,16 @@ func soundsCosmos() themeSounds {
return s
}
+func soundsRetrofuture() themeSounds {
+ var s themeSounds
+ s.Splash.Freqs = []float64{196, 246.94, 329.63, 440}
+ s.Splash.Spacing, s.Splash.Gain, s.Splash.Wave = 0.085, 0.095, "triangle"
+ s.Nav.Freq, s.Nav.Wave, s.Nav.Dur, s.Nav.Gain = 277.18, "triangle", 0.085, 0.1
+ s.Open.Wave, s.Open.Start, s.Open.End, s.Open.Dur, s.Open.Gain = "sine", 330, 523.25, 0.18, 0.09
+ s.Close.Wave, s.Close.Start, s.Close.End, s.Close.Dur, s.Close.Gain = "sine", 415.3, 165, 0.17, 0.085
+ return s
+}
+
func defaultSounds() themeSounds {
return soundsNeon()
}
diff --git a/internal/version/version.go b/internal/version/version.go
index 2cde488..a5b27c4 100644
--- a/internal/version/version.go
+++ b/internal/version/version.go
@@ -2,4 +2,4 @@
package version
// Version is the application version (semantic versioning).
-const Version = "0.3.1"
+const Version = "0.4.0"
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-17 09:59:00 +0000