diff options
Diffstat (limited to 'internal/generator/templates/themes/spaceage.tmpl')
| -rw-r--r-- | internal/generator/templates/themes/spaceage.tmpl | 282 |
1 files changed, 282 insertions, 0 deletions
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}}"><-- NEWER</a>{{end}} + {{if .NextPage}}<a href="{{.NextPage}}">OLDER --></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> |