drjones/dark0rbits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3.2 look: violet→cyan signature palette, slower calm drift, scanline+grid overlay

Browse Source
This commit is contained in:
drjones
2026-09-30 17:11:28 -07:00
parent a9347f8709
commit 3adb267929
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app.py
View File

@@ -114,18 +114,18 @@ BASE = """<!doctype html><html lang=en><head><meta charset=utf-8><meta name=view
<meta name=theme-color content="#070a13">
<link rel=canonical href="https://dark0rbits.thetempleofdoom.com">
<style>
:root{--bg:#070a13;--card:rgba(19,25,44,.82);--line:#242e4d;--fg:#e9edf8;--dim:#93a0c2;--acc:#ffc94d;--acc2:#6fd6ff;--acc3:#a78bfa;--ok:#42e8a4;--bad:#ff6161}
:root{--bg:#070a13;--card:rgba(19,25,44,.82);--line:#242e4d;--fg:#e9edf8;--dim:#93a0c2;--acc:#a78bfa;--acc2:#6fd6ff;--acc3:#6fd6ff;--ok:#42e8a4;--bad:#ff6161}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--fg);font:16px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center;overflow-x:hidden;background:var(--bg)}
#space{position:fixed;inset:0;z-index:0;display:block}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,var(--neb1,rgba(120,85,255,.16)),transparent 55%),radial-gradient(ellipse at 80% 110%,var(--neb2,rgba(0,190,255,.10)),transparent 50%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,5,.55) 100%)}
main{position:relative;z-index:2;max-width:920px;margin:0 auto;padding:1.6rem 1.1rem 4rem;text-align:center}
#lbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc3));z-index:50;transition:width .3s;box-shadow:0 0 10px var(--acc)}
#lbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:50;transition:width .3s;box-shadow:0 0 10px var(--acc)}
#lbar.done{width:100%;opacity:0;transition:opacity .5s}
header{position:sticky;top:0;z-index:40;background:rgba(7,10,19,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hbar{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem}
.logo{color:var(--acc);text-decoration:none;font-weight:800;letter-spacing:.28em;font-size:1rem;text-shadow:0 0 18px rgba(255,201,77,.35)}
.logo{color:var(--acc);text-decoration:none;font-weight:800;letter-spacing:.28em;font-size:1rem;text-shadow:0 0 18px rgba(167,139,250,.4)}
.burger{background:none;border:1px solid var(--line);color:var(--fg);font-size:1.15rem;border-radius:8px;padding:.35rem .7rem;cursor:pointer}
.burger:hover{border-color:var(--acc);color:var(--acc)}
.dnav{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
@@ -150,10 +150,10 @@ h1 span{color:var(--acc)}
.kv div:nth-child(even){background:rgba(255,255,255,.03);border-radius:8px;padding:.35rem .6rem}
@media(min-width:640px){.kv{grid-template-columns:180px 1fr}.kv div:nth-child(odd){padding-top:.35rem}}
input,select,button,textarea{font:inherit;background:rgba(10,15,30,.9);color:var(--fg);border:1px solid #2c3860;border-radius:10px;padding:.6rem .8rem;max-width:100%}
button{background:linear-gradient(135deg,var(--acc),#ff9d3c);color:#161000;border:0;font-weight:800;cursor:pointer;transition:.2s;letter-spacing:.05em}
button:hover{filter:brightness(1.12);box-shadow:0 0 18px -4px var(--acc)}
button{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0d0722;border:0;font-weight:800;cursor:pointer;transition:.2s;letter-spacing:.05em}
button:hover{filter:brightness(1.15);box-shadow:0 0 20px -4px var(--acc)}
button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}
button.big{font-size:1.02rem;padding:.75rem 1.4rem;margin:.25rem}
button.big{font-size:1.02rem;padding:.75rem 1.4rem;margin:.25rem;color:#0d0722}
.grid2{display:grid;grid-template-columns:1fr;gap:.9rem;text-align:center}
@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.tag{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.74rem;border:1px solid;margin:.15rem}
@@ -167,18 +167,19 @@ code{background:rgba(10,15,30,.9);padding:.08rem .4rem;border-radius:5px;font-si
a{color:var(--acc2)}
pre{text-align:left;white-space:pre-wrap;overflow-x:auto}
.drop{border:2px dashed #33406b;border-radius:14px;padding:1.8rem 1rem;cursor:pointer;transition:.2s}
.drop:hover,.drop.over{border-color:var(--acc);background:rgba(255,201,77,.05)}
.drop:hover,.drop.over{border-color:var(--acc);background:rgba(167,139,250,.06)}
.msg{background:rgba(10,15,30,.75);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:.6rem .9rem;margin:.55rem 0;text-align:left}
.msg.me{border-left-color:var(--acc2)}
.msg .who{color:var(--dim);font-size:.74rem}
.bar{height:7px;background:rgba(10,15,30,.9);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc3));width:0;transition:width .5s}
.bar{height:7px;background:rgba(10,15,30,.9);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));width:0;transition:width .5s}
#dev{position:fixed;bottom:14px;right:14px;z-index:45;background:rgba(19,25,44,.92);border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:.5rem .9rem;font-size:.8rem;text-decoration:none;box-shadow:0 0 18px -6px var(--acc)}
#dev:hover{background:var(--acc);color:#161000}
img{max-width:100%;border-radius:10px}
li{text-align:left;margin:.2rem 0}
.gridlines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(rgba(111,214,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(111,214,255,.03) 1px,transparent 1px);background-size:auto,80px 80px,80px 80px;mask-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.25))}
</style></head><body>
<div id="lbar"></div>
<canvas id="space"></canvas><div class="vignette" style="--neb1:{{n1}};--neb2:{{n2}}"></div>
<canvas id="space"></canvas><div class="gridlines"></div><div class="vignette" style="--neb1:{{n1}};--neb2:{{n2}}"></div>
<header><div class="hbar">
<a class=logo href=/ >◈ DARK0RBITS</a>
<div class="dnav">
@@ -233,7 +234,7 @@ var c=document.getElementById('space'),x=c.getContext('2d'),W,H,stars=[],dust=[]
function rs(){W=c.width=innerWidth;H=c.height=innerHeight;
stars=[];var n=Math.min(220,Math.floor(W*H/7000));
for(var i=0;i<n;i++)stars.push({x:Math.random()*W,y:Math.random()*H,z:Math.random()+.3,tw:Math.random()*6.28});
dust=[];for(i=0;i<14;i++)dust.push({x:Math.random()*W,y:Math.random()*H,r:40+Math.random()*90,vx:(Math.random()-.5)*.08,vy:(Math.random()-.5)*.06,h:Math.random()<.5?120:265,a:.05+Math.random()*.05});}
dust=[];for(i=0;i<14;i++)dust.push({x:Math.random()*W,y:Math.random()*H,r:40+Math.random()*90,vx:(Math.random()-.5)*.035,vy:(Math.random()-.5)*.028,h:Math.random()<.5?120:265,a:.05+Math.random()*.05});}
rs();addEventListener('resize',rs);
var mx=0,my=0,tx=0,ty=0;
addEventListener('mousemove',function(e){tx=(e.clientX/W-.5);ty=(e.clientY/H-.5)});
@@ -246,9 +247,9 @@ var g=x.createRadialGradient(d.x,d.y,0,d.x,d.y,d.r);
g.addColorStop(0,'hsla('+d.h+',70%,60%,'+d.a+')');g.addColorStop(1,'transparent');
x.fillStyle=g;x.beginPath();x.arc(d.x,d.y,d.r,0,6.29);x.fill();}
mx+=(tx-mx)*.03;my+=(ty-my)*.03;
for(i=0;i<stars.length;i++){var s=stars[i];s.tw+=.02;
for(i=0;i<stars.length;i++){var s=stars[i];s.tw+=.011;
var px=s.x+mx*s.z*40, py=s.y+my*s.z*40;
var a=.35+.45*Math.abs(Math.sin(s.tw));
var a=.28+.4*Math.abs(Math.sin(s.tw));
x.fillStyle='rgba(220,228,255,'+(a*s.z)+')';
x.beginPath();x.arc(px,py,s.z*1.25,0,6.29);x.fill();}
requestAnimationFrame(frame);}