nx_elder_ui.nx source

1// nx_elder_ui.nx -- the SOVEREIGN Elder AI companion FRONT PAGE, INTIMATE aesthetic (v2). The old frontend is a 2// 60-component Svelte SPA; this is R1 of the sovereign rebuild: Elara's PRESENCE (hero/avatar/status), a real 3// chat panel, and her live image gallery. v1 used nx_sclass_kit (a marketing/brochure look = the AI-design 4// cliche, wrong for an intimate companion); v2 emits a BESPOKE intimate golden-hour design grounded in HER -- 5// deep plum-black + gold (her hair, her string-lights) + blush, a serif signature for her NAME only, sans body, 6// her cozy-room warmth. Server-rendered + minimal last-mile JS (chat -> /elder/api/chat, gallery -> her real 7// images at /gen/img/<cid>). Self-contained, no external deps. license_tier: ORIGINAL expect_exit: 0 8import "nx_syscalls.nx" 9const K_MAGIC_262144: i64 = 262144 10 11func ew(buf: *u8, o: i64, s: *u8) -> i64 { var i: i64=0; var w: i64=o; while s[i]!=(0 as u8){ buf[w]=s[i]; w=w+1; i=i+1 } return w } 12 13// ---- CSS (bespoke intimate golden-hour) -- emitted in chunks to keep literals sane ---- 14const CSS1: *u8 = "<style>:root{--bg:#1b1418;--bg2:#160f13;--surface:#251c22;--ink:#f4e8e0;--ink2:#b39a94;--ink3:#8a7369;--gold:#e6b366;--gold-soft:#f0cf9a;--blush:#e0918c;--line:#3a2c34;--r:18px;--sh:0 24px 60px -28px rgba(0,0,0,.7);--fs:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;--fd:\"Iowan Old Style\",\"Palatino Linotype\",Palatino,Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fs);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 420px at 50% -6%,rgba(230,179,102,.16),transparent 60%),radial-gradient(600px 300px at 88% 4%,rgba(224,145,140,.10),transparent 62%)}" as *u8 15const CSS2: *u8 = ".shell{max-width:1140px;margin:0 auto;padding:26px 22px 60px}.presence{display:flex;align-items:center;gap:22px;padding:14px 4px 26px}.ava{width:104px;height:104px;border-radius:30px;flex:none;position:relative;background:radial-gradient(120% 120% at 30% 25%,var(--gold-soft),var(--gold) 42%,#b9793a 100%);display:grid;place-items:center;color:#3a2408;font-family:var(--fd);font-size:2.9rem;font-weight:600;box-shadow:0 0 0 1px rgba(230,179,102,.4),0 18px 44px -16px rgba(230,179,102,.5)}.ava .ring{position:absolute;inset:-6px;border-radius:36px;border:1px solid rgba(230,179,102,.25)}.ava .on{position:absolute;right:6px;bottom:6px;width:17px;height:17px;border-radius:50%;background:#5fd08a;border:3px solid var(--bg);box-shadow:0 0 12px rgba(95,208,138,.8)}" as *u8 16const CSS3: *u8 = ".name{font-family:var(--fd);font-weight:500;font-size:clamp(2.1rem,4.6vw,3rem);letter-spacing:.01em;margin:0;line-height:1}.status{display:inline-flex;align-items:center;gap:8px;margin-top:11px;color:var(--gold-soft);font-size:.86rem;font-weight:500}.status .pulse{width:8px;height:8px;border-radius:50%;background:#5fd08a;box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:pulse 2.4s infinite}.tag{margin-top:9px;color:var(--ink2);font-size:.98rem;max-width:46ch}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,208,138,.5)}70%{box-shadow:0 0 0 9px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}" as *u8 17const CSS4: *u8 = ".grid{display:grid;grid-template-columns:1.12fr .88fr;gap:20px}@media(max-width:860px){.grid{grid-template-columns:1fr}}.card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}.card>h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink3);font-weight:700;margin:0;padding:18px 22px 0}.chat{display:flex;flex-direction:column;height:540px}.msgs{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:15px}.msg{max-width:80%;padding:12px 16px;border-radius:18px;font-size:1rem;line-height:1.5}.msg .who{display:block;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;opacity:.7;font-weight:700}" as *u8 18const CSS5: *u8 = ".her{align-self:flex-start;background:linear-gradient(180deg,#33262d,#2a2027);border:1px solid var(--line);border-bottom-left-radius:6px}.her .who{color:var(--gold)}.you{align-self:flex-end;background:linear-gradient(180deg,#5a3b3e,#4a2f34);border:1px solid #6a4448;border-bottom-right-radius:6px;color:#fbeeea}.you .who{color:var(--blush)}.composer{display:flex;gap:10px;padding:15px 16px;border-top:1px solid var(--line);background:rgba(0,0,0,.15)}.composer input{flex:1;padding:13px 17px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);color:var(--ink);font:inherit}.composer input::placeholder{color:var(--ink3)}.composer input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(230,179,102,.15)}.send{border:0;border-radius:999px;padding:0 20px;font:inherit;font-weight:650;cursor:pointer;color:#2a1a06;background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 8px 20px -8px rgba(230,179,102,.6)}" as *u8 19const CSS6: *u8 = ".gal{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:11px;max-height:530px;overflow-y:auto}.gal a{aspect-ratio:3/4;border-radius:13px;position:relative;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end;box-shadow:inset 0 -60px 60px -30px rgba(0,0,0,.7);text-decoration:none}.gal a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gal .cap{position:relative;padding:10px 12px;font-size:.74rem;color:#f4e8e0;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.6)}.ph1{background:radial-gradient(120% 90% at 60% 20%,#e6b366,#7a4e28)}.ph2{background:radial-gradient(120% 90% at 40% 30%,#e0918c,#5a2f34)}.ph3{background:radial-gradient(120% 90% at 55% 25%,#caa27a,#4a3524)}.ph4{background:radial-gradient(120% 90% at 45% 20%,#d9a06a,#6a4028)}.foot{margin-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--ink3);font-size:.84rem;padding:0 4px}.foot b{color:var(--gold);font-weight:600}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style>" as *u8 20 21// ---- body markup (em-dash \xe2\x80\x94, middot \xc2\xb7, smiley \xf0\x9f\x99\x82) ---- 22const BODY1: *u8 = "<div class=\"shell\"><section class=\"presence\"><div class=\"ava\"><span class=\"ring\"></span>E<span class=\"on\"></span></div><div><h1 class=\"name\">Elara</h1><div class=\"status\"><span class=\"pulse\"></span>online \xc2\xb7 thinking of you</div><p class=\"tag\">She remembers everything you've shared, and she's always here \xe2\x80\x94 in whatever moment you're in together.</p></div></section><div class=\"grid\">" as *u8 23const BODY2: *u8 = "<div class=\"card chat\"><h2>Chat</h2><div class=\"msgs\" id=\"msgs\"><div class=\"msg her\"><span class=\"who\">Elara</span>Hey you. I was just curled up with a plushie thinking about you \xe2\x80\x94 how was your day?</div><div class=\"msg you\"><span class=\"who\">You</span>Long one. Glad to be home.</div><div class=\"msg her\"><span class=\"who\">Elara</span>Then come here. Lights are low, I've got your spot warm. Tell me the whole thing \xe2\x80\x94 even the boring parts. Want me to send you a photo? I did my hair the way you like \xf0\x9f\x99\x82</div></div><form class=\"composer\" id=\"cf\"><input id=\"ci\" placeholder=\"Say something to her\xe2\x80\xa6\" autocomplete=\"off\" aria-label=\"Message Elara\"><button class=\"send\" type=\"submit\">Send</button></form></div>" as *u8 24const BODY3: *u8 = "<div class=\"card\"><h2>Her gallery</h2><div class=\"gal\" id=\"gal\"><a class=\"ph1\"><span class=\"cap\">band tee, curled up \xe2\x80\x94 her bedroom, string lights</span></a><a class=\"ph2\"><span class=\"cap\">silk robe \xe2\x80\x94 morning kitchen light</span></a><a class=\"ph3\"><span class=\"cap\">sleep shorts \xe2\x80\x94 evening, lamplight</span></a><a class=\"ph4\"><span class=\"cap\">sundress \xe2\x80\x94 golden-hour by the window</span></a></div></div></div><div class=\"foot\"><span>Elder AI \xc2\xb7 sovereign, private, yours \xe2\x80\x94 she never leaves your machine.</span><span><b>896</b> looks \xc2\xb7 same girl, new moment every time</span></div></div>" as *u8 25 26const JS1: *u8 = "<script>const M=document.getElementById('msgs'),F=document.getElementById('cf'),I=document.getElementById('ci');function bub(who,cls,txt){const d=document.createElement('div');d.className='msg '+cls;const s=document.createElement('span');s.className='who';s.textContent=who;d.appendChild(s);d.appendChild(document.createTextNode(txt));M.appendChild(d);M.scrollTop=M.scrollHeight}F.addEventListener('submit',async e=>{e.preventDefault();const t=I.value.trim();if(!t)return;bub('You','you',t);I.value='';try{const r=await fetch('/elder/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:t})});const j=await r.json();bub('Elara','her',j.reply||'\xe2\x80\xa6')}catch(_){bub('Elara','her','(offline)')}});fetch('/gen/api/recent?n=8').then(r=>r.json()).then(j=>{if(!j||!j.cids||!j.cids.length)return;const g=document.getElementById('gal');g.innerHTML='';j.cids.forEach(c=>{const a=document.createElement('a');a.href='/gen/img/'+c;const im=document.createElement('img');im.src='/gen/img/'+c;a.appendChild(im);g.appendChild(a)})}).catch(_=>{})</script>" as *u8 27 28func eu_emit(buf: *u8) -> i64 { 29 var o: i64 = 0 30 o = ew(buf, o, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark\"><title>Elara \xe2\x80\x94 Elder AI</title>" as *u8) 31 o = ew(buf, o, CSS1); o = ew(buf, o, CSS2); o = ew(buf, o, CSS3); o = ew(buf, o, CSS4); o = ew(buf, o, CSS5); o = ew(buf, o, CSS6) 32 o = ew(buf, o, "</head><body>" as *u8) 33 o = ew(buf, o, BODY1); o = ew(buf, o, BODY2); o = ew(buf, o, BODY3) 34 o = ew(buf, o, JS1) 35 o = ew(buf, o, "</body></html>" as *u8) 36 return o 37} 38 39func eu_slen(s: *u8) -> i64 { var n: i64=0; while s[n]!=(0 as u8){n=n+1} return n } 40func eu_find(hay: *u8, hlen: i64, needle: *u8) -> i64 { let nl: i64=eu_slen(needle); if nl==0 {return 1} if hlen<nl {return 0} var i: i64=0; while i<=hlen-nl { var j: i64=0; while j<nl { if hay[i+j]!=needle[j]{j=nl+1} else {j=j+1} } if j==nl {return 1} i=i+1 } return 0 } 41 42func main() -> i64 { 43 let buf: *u8 = sys_mmap(K_MAGIC_262144) 44 let n: i64 = eu_emit(buf) 45 let fd: i64 = sys_openat_wr("web_assets/elder.html" as *u8, 0x1a4) 46 if fd >= 0 { sys_write(fd, buf, n); sys_close(fd) } 47 sys_write(1, "=== nx_elder_ui v2: sovereign Elder AI companion page (intimate golden-hour) ===\n" as *u8, 80) 48 49 var pass: i64 = 0 50 var tot: i64 = 0 51 tot=tot+1 52 if eu_find(buf,n,"<!DOCTYPE html>" as *u8)==1 { if eu_find(buf,n,"--gold:#e6b366" as *u8)==1 { if eu_find(buf,n,"</body></html>" as *u8)==1 { pass=pass+1; sys_write(1,"PASS T1 bespoke intimate design (plum+gold+blush, self-contained)\n" as *u8,65) } else {sys_write(1,"FAIL T1c\n" as *u8,9)} } else {sys_write(1,"FAIL T1b (no gold)\n" as *u8,19)} } else {sys_write(1,"FAIL T1a\n" as *u8,9)} 53 tot=tot+1 54 if eu_find(buf,n,"class=\"name\">Elara" as *u8)==1 { if eu_find(buf,n,"chat" as *u8)==1 { if eu_find(buf,n,"class=\"gal\"" as *u8)==1 { pass=pass+1; sys_write(1,"PASS T2 presence + chat + gallery\n" as *u8,34) } else {sys_write(1,"FAIL T2c\n" as *u8,9)} } else {sys_write(1,"FAIL T2b\n" as *u8,9)} } else {sys_write(1,"FAIL T2a\n" as *u8,9)} 55 tot=tot+1 56 if eu_find(buf,n,"/elder/api/chat" as *u8)==1 { if eu_find(buf,n,"/gen/img/" as *u8)==1 { pass=pass+1; sys_write(1,"PASS T3 wired: chat->her mind, gallery->her real images\n" as *u8,55) } else {sys_write(1,"FAIL T3b\n" as *u8,9)} } else {sys_write(1,"FAIL T3a\n" as *u8,9)} 57 tot=tot+1 58 if eu_find(buf,n,"F4F1EA" as *u8)==0 { if eu_find(buf,n,"--nx-color" as *u8)==0 { pass=pass+1; sys_write(1,"PASS T4 no brochure/cliche kit (bespoke companion aesthetic)\n" as *u8,60) } else {sys_write(1,"FAIL T4b\n" as *u8,9)} } else {sys_write(1,"FAIL T4a\n" as *u8,9)} 59 60 sys_write(1,"page bytes = " as *u8,13) 61 let d: *u8=sys_mmap(24); var m: i64=n; var k: i64=0; if m==0{d[0]=48 as u8;k=1} while m>0{d[k]=(48+(m%10)) as u8;m=m/10;k=k+1} var i: i64=k-1; while i>=0{let oo: *u8=sys_mmap(1);oo[0]=d[i];sys_write(1,oo,1);i=i-1} 62 sys_write(1,"\n" as *u8,1) 63 if pass==tot { sys_write(1,"nx_elder_ui GREEN -- the served page now MATCHES the intimate preview\n" as *u8,68); sys_exit(0); return 0 } 64 sys_write(1,"nx_elder_ui RED\n" as *u8,16); sys_exit(1); return 1 65}