can swap themes dynamicallyv0.12.0

3 files changed, 243 insertions, 0 deletions

diff --git a/internal/generator/templates/themes/dos/meta.json b/internal/generator/templates/themes/dos/meta.json
new file mode 100644
index 0000000..fd59dd3
--- /dev/null
+++ b/internal/generator/templates/themes/dos/meta.json
@@ -0,0 +1,7 @@
+{
+  "title": "SNONUX.FOO - DOS",
+  "header_html": "\u003cdiv class=\"logo\"\u003e\n                \u003cspan class=\"logo-mark\"\u003eC:\\\u0026gt;\u003c/span\u003e\n                \u003cdiv class=\"logo-title\"\u003e\n                    \u003ch1\u003eSNONUX.FOO\u003c/h1\u003e\n                    \u003cp class=\"subtitle\"\u003eMICROBLOG \u0026mdash; \u003ca href=\"https://foo.zone\"\u003eFOO.ZONE\u003c/a\u003e IS THE REAL BLOG\u003c/p\u003e\n                    \u003cp class=\"logo-host\"\u003eServed by NetBSD on a Raspberry Pi 3\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"nav\"\u003e\n                \u003ca href=\"atom.xml\" class=\"header-feed-link\" rel=\"alternate\" title=\"Atom feed\" type=\"application/atom+xml\"\u003eAtom feed\u003c/a\u003e\n                \u003ca href=\"https://foo.zone/about\" class=\"transmit-btn\"\u003eABOUT\u003c/a\u003e\n            \u003c/div\u003e",
+  "splash_inner_html": "\u003ccanvas class=\"splash-gl-canvas\" id=\"splash-gl-canvas\" aria-hidden=\"true\"\u003e\u003c/canvas\u003e\n        \u003cdiv class=\"splash-inner\"\u003e\n            \u003cdiv class=\"splash-title\"\u003eC:\\SNONUX\u0026gt;\u003c/div\u003e\n            \u003cdiv class=\"splash-tag\"\u003eMS-DOS v6.22\u003c/div\u003e\n            \u003cdiv class=\"splash-hint\"\u003ePress any key to continue...\u003c/div\u003e\n        \u003c/div\u003e",
+  "prev_page_text": "\u0026lt;-- NEWER",
+  "next_page_text": "OLDER --\u0026gt;"
+}
diff --git a/internal/generator/templates/themes/dos/theme.css b/internal/generator/templates/themes/dos/theme.css
new file mode 100644
index 0000000..ee06438
--- /dev/null
+++ b/internal/generator/templates/themes/dos/theme.css
@@ -0,0 +1,79 @@
+        :root { --dos-blue:#0000aa; --dos-lblue:#5555ff; --dos-white:#aaaaaa;
+                --dos-bwhite:#ffffff; --dos-yellow:#ffff55; --dos-cyan:#55ffff;
+                --dos-red:#ff5555; --dos-bg:#000088; --dos-black:#000000; }
+        * { margin:0; padding:0; box-sizing:border-box; }
+        body { font-family:'VT323','Courier New',monospace; background:var(--dos-blue);
+               color:var(--dos-bwhite); overflow:hidden; height:100vh; font-size:18px; }
+        #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:8px 20px; background:var(--dos-white); color:var(--dos-blue);
+                 display:flex; align-items:center; justify-content:space-between; }
+        .logo { display:flex; align-items:center; gap:12px; }
+        .logo-mark { font-size:1.8rem; color:var(--dos-blue); font-weight:bold; }
+        .logo-title h1 { font-size:1.4rem; color:var(--dos-blue); font-weight:normal; letter-spacing:2px; }
+        .logo-title .subtitle { font-size:0.85rem; color:var(--dos-blue); margin-top:1px; }
+        .logo-title .subtitle a { color:var(--dos-blue); text-decoration:underline; }
+        .logo-title .subtitle a:hover { color:var(--dos-black); }
+        .transmit-btn { border:2px solid var(--dos-blue); color:var(--dos-blue); padding:4px 14px;
+                        text-decoration:none; font-size:1rem; letter-spacing:1px;
+                        transition:all 0.1s; }
+        .transmit-btn:hover { background:var(--dos-blue); color:var(--dos-bwhite); }
+        a.header-feed-link { color:var(--dos-blue); }
+        a.header-feed-link:hover { color:var(--dos-black); }
+        .nav-hints { background:var(--dos-blue); border-bottom:2px solid var(--dos-lblue);
+                     color:var(--dos-cyan); padding:4px 20px; display:flex; gap:16px;
+                     font-size:0.85rem; flex-wrap:wrap; }
+        .nav-hints kbd { background:var(--dos-black); border:1px solid var(--dos-lblue);
+                         color:var(--dos-yellow); padding:0 5px; margin:0 2px; }
+        .content { flex:1; overflow-y:auto; padding:12px 20px;
+                   scrollbar-width:thin; scrollbar-color:var(--dos-lblue) var(--dos-blue); }
+        .page-nav { display:flex; justify-content:center; margin:10px 0; }
+        .page-nav a { border:2px solid var(--dos-lblue); color:var(--dos-yellow); padding:6px 18px;
+                      text-decoration:none; font-size:1rem; letter-spacing:1px; }
+        .page-nav a:hover { background:var(--dos-lblue); color:var(--dos-bwhite); }
+        .page-nav-footer { flex-shrink:0; padding:6px 20px; display:flex; justify-content:center;
+            background:var(--dos-white); color:var(--dos-blue); }
+        .page-nav-footer .page-nav a { border-color:var(--dos-blue); color:var(--dos-blue); }
+        .page-nav-footer .page-nav a:hover { background:var(--dos-blue); color:var(--dos-bwhite); }
+        .post { background:var(--dos-black); border:2px solid var(--dos-lblue);
+                padding:12px 14px; margin-bottom:8px; cursor:pointer;
+                transition:border-color 0.1s; }
+        .post:hover { border-color:var(--dos-yellow);
+                      box-shadow:0 0 0 1px var(--dos-yellow); }
+        .post-active { border-color:var(--dos-yellow) !important;
+                       background:rgba(0,0,170,0.3) !important;
+                       box-shadow:0 0 0 2px var(--dos-yellow),inset 3px 0 0 var(--dos-yellow) !important; }
+        .post-header { display:flex; justify-content:space-between; margin-bottom:8px; font-size:1rem; }
+        .post-header strong { color:var(--dos-yellow); }
+        .post-time { color:var(--dos-cyan); font-size:0.95rem; }
+        .post-text { line-height:1.5; font-size:1.05rem; }
+        .post-text a { color:var(--dos-cyan); text-decoration:underline; }
+        .post-text a:hover { color:var(--dos-yellow); }
+        .post-image { max-width:100%; margin-top:8px; border:2px solid var(--dos-lblue); }
+        .post-audio { width:100%; margin-top:8px; }
+        .post-modal { display:none; position:fixed; inset:0; z-index:100;
+                      background:rgba(0,0,0,0.95); overflow-y:auto; padding:40px 20px; }
+        .post-modal.active { display:block; }
+        .modal-inner { max-width:740px; margin:0 auto; background:var(--dos-black);
+                       border:2px solid var(--dos-yellow); padding:24px;
+                       box-shadow:0 0 20px rgba(85,85,255,0.4); }
+        .modal-close { float:right; background:var(--dos-white); border:2px outset var(--dos-bwhite);
+                       color:var(--dos-blue); font-family:'VT323','Courier New',monospace;
+                       font-size:1rem; cursor:pointer; padding:2px 8px; }
+        .modal-close:hover { background:var(--dos-blue); color:var(--dos-bwhite);
+                             border-style:inset; }
+        @media(max-width:640px) { .nav-hints{display:none;} header{padding:6px 12px;} .content{padding:8px 12px;} }
+        [data-sno-theme="dos"] .splash-overlay { background:var(--dos-blue); font-family:'VT323','Courier New',monospace; }
+        [data-sno-theme="dos"] .splash-inner { position:relative; z-index:1; }
+        [data-sno-theme="dos"] .splash-title {
+            font-size:clamp(1.4rem,4.5vw,2rem); color:var(--dos-bwhite);
+            letter-spacing:0.15em;
+            animation: splashDosBlink 1s step-end infinite;
+        }
+        @keyframes splashDosBlink { 0%,100%{border-right:0.6em solid var(--dos-bwhite)} 50%{border-right:0.6em solid transparent} }
+        [data-sno-theme="dos"] .splash-tag { color:var(--dos-yellow); letter-spacing:0.15em; }
+        [data-sno-theme="dos"] .splash-hint { color:var(--dos-cyan); }
+        [data-sno-theme="dos"] .splash-inner {
+            background:var(--dos-black); border:2px solid var(--dos-lblue);
+            text-shadow:none; box-shadow:4px 4px 0 rgba(0,0,0,0.5);
+        }
diff --git a/internal/generator/templates/themes/dos/theme.js b/internal/generator/templates/themes/dos/theme.js
new file mode 100644
index 0000000..1d913ac
--- /dev/null
+++ b/internal/generator/templates/themes/dos/theme.js
@@ -0,0 +1,157 @@
+
+    (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,drops=[],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:false,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(1);
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,80);ca.position.z=20;
+        var geo=new THREE.PlaneGeometry(0.22,0.32);
+        for(var i=0;i<60;i++){
+            var mat=new THREE.MeshBasicMaterial({color:0x55ff55,transparent:true,opacity:0.3+Math.random()*0.4});
+            var m=new THREE.Mesh(geo,mat);
+            m.position.set((Math.random()-0.5)*28, Math.random()*22-11, (Math.random()-0.5)*5);
+            m.userData.speed=0.5+Math.random()*1.5;
+            sc.add(m); drops.push(m);
+        }
+        sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);
+            for(var i=0;i<drops.length;i++){
+                drops[i].position.y-=drops[i].userData.speed*0.06;
+                if(drops[i].position.y<-12) drops[i].position.y=12;
+            }
+            ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+
+
+    (function() {
+        var _wild = false, _snoTOffset = 0, _snoLastT = 0;
+        var scene, camera, renderer, clock;
+        var columns = [];
+
+        function initThree() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x000088);
+
+            camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 200);
+            camera.position.set(0, 0, 40);
+
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: false });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(1);
+            clock = new THREE.Clock();
+
+            var geo = new THREE.PlaneGeometry(0.35, 0.5);
+
+            for (var c = 0; c < 30; c++) {
+                var col = [];
+                var x = (c - 15) * 2.2;
+                var speed = 1.5 + Math.random() * 3;
+                var startY = Math.random() * 60 - 30;
+                for (var r = 0; r < 8; r++) {
+                    var brightness = 1.0 - (r / 8) * 0.7;
+                    var color = new THREE.Color(brightness * 0.33, brightness, brightness * 0.33);
+                    var mat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: brightness * 0.5 });
+                    var mesh = new THREE.Mesh(geo, mat);
+                    mesh.position.set(x, startY - r * 0.7, 0);
+                    scene.add(mesh);
+                    col.push({ mesh: mesh, offset: r * 0.7 });
+                }
+                columns.push({ chars: col, x: x, speed: speed, y: startY });
+            }
+
+            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 realT = clock.getElapsedTime();
+            _snoTOffset += (realT - _snoLastT) * (_wild ? 9 : 0);
+            _snoLastT = realT;
+            var t = realT + _snoTOffset;
+            for (var c = 0; c < columns.length; c++) {
+                var col = columns[c];
+                var y = col.y - t * col.speed;
+                y = ((y % 60) + 60) % 60 - 30;
+                for (var r = 0; r < col.chars.length; r++) {
+                    col.chars[r].mesh.position.y = y - col.chars[r].offset;
+                    // Wild: each char jitters horizontally like corrupted RAM
+                    if (_wild) { col.chars[r].mesh.position.x = col.x + (Math.random() - 0.5) * 2.5; }
+                    else { col.chars[r].mesh.position.x = col.x; }
+                }
+            }
+            // Wild: camera lunges forward/back and sways like a CRT meltdown
+            if (_wild) {
+                camera.position.z = 40 + Math.sin(realT * 0.41) * 14;
+                camera.position.x = Math.sin(realT * 0.37) * 8;
+                camera.fov = 60 + Math.sin(realT * 0.53) * 16;
+                camera.updateProjectionMatrix();
+            } else {
+                camera.position.z = 40;
+                camera.position.x = 0;
+                if (camera.fov !== 60) { camera.fov = 60; camera.updateProjectionMatrix(); }
+            }
+            renderer.render(scene, camera);
+        }
+
+        initThree();
+
+        // DOS nav/wild effects — CRT glitch on navigate, system crash rain on wild
+        window.snonuxOpenEffect = function() {
+            // Slide in like a dialog box appearing on DOS screen
+            var modal = document.getElementById('post-modal');
+            if (modal) { modal.classList.add('sno-modal-slide'); setTimeout(function() { modal.classList.remove('sno-modal-slide'); }, 360); }
+            // CRT scan flash from top
+            var d = document.createElement('div');
+            d.style.cssText = 'position:fixed;top:0;left:0;right:0;height:4px;z-index:997;pointer-events:none;background:rgba(85,255,255,0.7);box-shadow:0 0 8px rgba(85,255,255,0.5);transition:top 0.28s linear,opacity 0.1s 0.28s';
+            document.body.appendChild(d);
+            setTimeout(function() { d.style.top='100vh'; setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, 120); }, 280); }, 15);
+        };
+        window.snonuxCloseEffect = function() {
+            var ov = document.querySelector('.overlay');
+            if (ov) { ov.classList.add('sno-fx-glitch'); setTimeout(function() { ov.classList.remove('sno-fx-glitch'); }, 280); }
+        };
+        window.snonuxScrollEffect = function(dir) {
+            var isDown = dir === 'down';
+            var thick = _wild ? '14px' : '5px';
+            var d = document.createElement('div');
+            // DOS/CRT: grey-to-white scanline
+            d.style.cssText = 'position:fixed;left:0;right:0;height:' + thick + ';z-index:9000;pointer-events:none;' +
+                'background:linear-gradient(90deg,transparent,rgba(180,180,180,0.9),rgba(255,255,255,0.9),rgba(180,180,180,0.9),transparent);' +
+                (isDown ? 'top:0;' : 'bottom:0;') +
+                'transition:transform 0.28s ease,opacity 0.28s ease;';
+            document.body.appendChild(d);
+            setTimeout(function() { d.style.transform = isDown ? 'translateY(100vh)' : 'translateY(-100vh)'; d.style.opacity='0'; }, 16);
+            setTimeout(function() { d.remove(); }, 360);
+        };
+        window.snonuxWildToggle = function() {
+            _wild = !_wild;
+            var b = document.getElementById('sno-wild-badge');
+            if (b) b.classList.toggle('sno-wild-on', _wild);
+        };
+        window.snonuxNavEffect = function() {
+            // CRT horizontal glitch
+            var ov = document.querySelector('.overlay');
+            if (ov) { ov.classList.add('sno-fx-glitch'); setTimeout(function() { ov.classList.remove('sno-fx-glitch'); }, 300); }
+            var d = document.createElement('div');
+            d.style.cssText = 'position:fixed;inset:0;z-index:998;pointer-events:none;background:rgba(85,255,85,0.12);transition:opacity 0.15s';
+            document.body.appendChild(d);
+            setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, 180); }, 25);
+        };
+        window.snonuxPageEffect = function() {
+            // System crash — scanline strobe
+            var ov = document.querySelector('.overlay');
+            if (ov) { ov.classList.add('sno-fx-glitch'); setTimeout(function() { ov.classList.remove('sno-fx-glitch'); setTimeout(function() { ov.classList.add('sno-fx-glitch'); setTimeout(function() { ov.classList.remove('sno-fx-glitch'); }, 280); }, 40); }, 310); }
+        };
+    })();