From 912b6d370eeb5a9746d5a8a68aa0b666dac8c639 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:21:21 +0000 Subject: [PATCH 1/7] Initial plan From 6c22d09651bec097da4863b5133a6a0e99f9287f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:25:02 +0000 Subject: [PATCH 2/7] =?UTF-8?q?structure=20=E2=80=94=20Create/verify=20dir?= =?UTF-8?q?ectory=20layout=20and=20placeholder=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- .../assets/svgs/hologram-activation.svg | 17 +++++++++++++++++ docs/scifi-ui/assets/svgs/lcars-panels.svg | 16 ++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 docs/scifi-ui/assets/svgs/hologram-activation.svg create mode 100644 docs/scifi-ui/assets/svgs/lcars-panels.svg diff --git a/docs/scifi-ui/assets/svgs/hologram-activation.svg b/docs/scifi-ui/assets/svgs/hologram-activation.svg new file mode 100644 index 0000000..968c732 --- /dev/null +++ b/docs/scifi-ui/assets/svgs/hologram-activation.svg @@ -0,0 +1,17 @@ + + diff --git a/docs/scifi-ui/assets/svgs/lcars-panels.svg b/docs/scifi-ui/assets/svgs/lcars-panels.svg new file mode 100644 index 0000000..7ca31d9 --- /dev/null +++ b/docs/scifi-ui/assets/svgs/lcars-panels.svg @@ -0,0 +1,16 @@ + + From c1ee4325936dc8db6f8da12924fd091a30d021fe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:27:12 +0000 Subject: [PATCH 3/7] =?UTF-8?q?styles=20=E2=80=94=20Implement=20exact=20CS?= =?UTF-8?q?S=20values?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- docs/scifi-ui/index.html | 5 +++++ docs/scifi-ui/styles/base.css | 5 +++-- docs/scifi-ui/styles/cyberpunk.css | 9 ++++++--- docs/scifi-ui/styles/lcars.css | 5 ++++- docs/scifi-ui/styles/starwars.css | 7 ++++--- 5 files changed, 22 insertions(+), 9 deletions(-) diff --git a/docs/scifi-ui/index.html b/docs/scifi-ui/index.html index 6ec99b4..f204a80 100644 --- a/docs/scifi-ui/index.html +++ b/docs/scifi-ui/index.html @@ -10,6 +10,11 @@ content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; font-src 'self' data:; media-src 'self'; connect-src 'self'"> + diff --git a/docs/scifi-ui/styles/base.css b/docs/scifi-ui/styles/base.css index de8ff53..6fc11d7 100644 --- a/docs/scifi-ui/styles/base.css +++ b/docs/scifi-ui/styles/base.css @@ -12,6 +12,7 @@ body{min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#121622 a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} img{max-width:100%;height:auto} +:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .fx{position:fixed;inset:0;pointer-events:none;z-index:0} .fx-scanlines{background-image:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.05) 2px 3px);mix-blend-mode:soft-light;opacity:.25} .fx-noise{background-image:url("data:image/svg+xml;utf8,"); @@ -24,7 +25,7 @@ img{max-width:100%;height:auto} .switcher .theme[aria-pressed="true"]{background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent),black 30%));color:#141518} .hero{max-width:var(--max);margin:40px auto 12px;padding:0 20px;text-align:center} .progress{position:relative;height:44px;max-width:620px;margin:0 auto 18px;border-radius:24px;background:#0b0d10;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55);overflow:hidden} -.progress .bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite} +.progress .bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);transition:none;width:0;animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite} .progress .cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216);} @keyframes fill{0%{transform:translateX(-100%)}100%{transform:translateX(0)}} .brand{margin:0 0 12px;font:900 clamp(34px,6.5vw,66px)/1.05 "Segoe UI",system-ui,Roboto,Arial,sans-serif;letter-spacing:.1em;color:var(--accent-2);text-shadow:0 0 12px #ff9d00aa,0 0 1px #000} @@ -58,4 +59,4 @@ img{max-width:100%;height:auto} .preloader__lcars .preloader__cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216)} .preloader__label{margin-top:16px;color:#ffd089;text-align:center} @keyframes fill{0%{transform:translateX(-100%)}100%{transform:translateX(0)}} -@media (prefers-reduced-motion:reduce){.fx-noise,.fx-scanlines{animation:none}.preloader__lcars .preloader__bar,.progress .bar{animation:none}} +@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.fx-noise,.fx-scanlines{animation:none}.preloader__lcars .preloader__bar,.progress .bar{animation:none}} diff --git a/docs/scifi-ui/styles/cyberpunk.css b/docs/scifi-ui/styles/cyberpunk.css index 7c7b800..090457a 100644 --- a/docs/scifi-ui/styles/cyberpunk.css +++ b/docs/scifi-ui/styles/cyberpunk.css @@ -1,8 +1,11 @@ -:root[data-theme="cyberpunk"]{--bg:#0a0010;--text:#ffe990;--muted:#ff86e6;--panel:#ff00ff14;--card:#ff00ff24;--magenta:#FF2EC0;--cyan:#00E5FF;--yellow:#FFD500;--accent:#FF2EC0;--accent-2:#FFD500;--border:#FF2EC0} +:root[data-theme="cyberpunk"]{--bg:#0a0010;--text:#ffe990;--muted:#ff86e6;--panel:#ff00ff14;--card:#ff00ff24;--cp-magenta:#FF2EC0;--cp-cyan:#00E5FF;--cp-yellow:#FFD500;--accent:#FF2EC0;--accent-2:#FFD500;--border:#FF2EC0} :root[data-theme="cyberpunk"] body{background:radial-gradient(1200px 600px at 50% -10%,#1a0024 0%,#0a0010 45%) fixed,#0a0010;filter:contrast(1.06) saturate(1.25);font-family:"OCR-A","VT323",ui-monospace,monospace} -:root[data-theme="cyberpunk"] .brand{font-family:"OCR-A","VT323",ui-monospace,monospace;color:var(--yellow);text-shadow:0 0 6px rgba(255,46,192,.35),0 0 2px #000,0 0 16px rgba(0,229,255,.25)} -:root[data-theme="cyberpunk"] .panel,:root[data-theme="cyberpunk"] .card,:root[data-theme="cyberpunk"] .chip{border-color:color-mix(in oklab,var(--magenta),#000 35%);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 0 40px #ff00ff22,inset 0 0 30px #ff00ff11} +:root[data-theme="cyberpunk"] .brand{font-family:"OCR-A","VT323",ui-monospace,monospace;color:var(--cp-yellow);text-shadow:0 0 6px rgba(255,46,192,.35),0 0 2px #000,0 0 16px rgba(0,229,255,.25)} +:root[data-theme="cyberpunk"] .panel,:root[data-theme="cyberpunk"] .card,:root[data-theme="cyberpunk"] .chip{border-color:color-mix(in oklab,var(--cp-magenta),#000 35%);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 0 40px #ff00ff22,inset 0 0 30px #ff00ff11} +:root[data-theme="cyberpunk"] .progress .bar{background:linear-gradient(90deg,var(--cp-cyan),#8c2eff)} +:root[data-theme="cyberpunk"] .progress .bar.active{animation:cp-glitch 1.2s steps(6) infinite,cp-hue-pulse 1.2s linear infinite} @keyframes cp-glitch{0%{clip-path:inset(0 0 0 0);transform:translateX(0)}10%{clip-path:inset(0 0 85% 0);transform:translateX(-2px)}20%{clip-path:inset(80% 0 0 0);transform:translateX(1px)}30%{clip-path:inset(10% 0 60% 0);transform:translateX(-1px)}40%{clip-path:inset(60% 0 20% 0);transform:translateX(2px)}50%{clip-path:inset(0 0 0 0);transform:translateX(0)}60%{clip-path:inset(0 0 70% 0);transform:translateX(2px)}70%{clip-path:inset(65% 0 0 0);transform:translateX(-2px)}80%{clip-path:inset(20% 0 40% 0);transform:translateX(1px)}100%{clip-path:inset(0 0 0 0);transform:translateX(0)}} +@keyframes cp-hue-pulse{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(8deg)}100%{filter:hue-rotate(0deg)}} @keyframes huePulse{0%{filter:hue-rotate(0)}50%{filter:hue-rotate(12deg)}100%{filter:hue-rotate(0)}} :root[data-theme="cyberpunk"] .brand[data-glitch="on"]{animation:cp-glitch 800ms steps(6) infinite, huePulse 800ms linear infinite} :root[data-theme="cyberpunk"] .preloader__lcars .preloader__bar{background:linear-gradient(90deg,#FF2EC0,#9b0bb0)} diff --git a/docs/scifi-ui/styles/lcars.css b/docs/scifi-ui/styles/lcars.css index af618f7..5bc85b9 100644 --- a/docs/scifi-ui/styles/lcars.css +++ b/docs/scifi-ui/styles/lcars.css @@ -1,4 +1,7 @@ -:root[data-theme="lcars"]{--bg:#070809;--text:#ffe7b6;--muted:#ffc977;--accent:#FF9A3C;--accent-2:#8C6AFF;--border:#FF9A3C;--panel:#1a12030e;--card:#ff99000f;--panel-glow:rgba(255,154,60,0.12);--progress-dur:1.6s} +:root[data-theme="lcars"]{--bg:#070809;--text:#ffe7b6;--muted:#ffc977;--lcars-main:#FF9A3C;--lcars-accent:#8C6AFF;--accent:#FF9A3C;--accent-2:#8C6AFF;--border:#FF9A3C;--panel:#1a12030e;--card:#ff99000f;--panel-glow:rgba(255,154,60,0.12);--progress-dur:1.6s} :root[data-theme="lcars"] body{background:radial-gradient(1200px 600px at 50% -10%,#161008 0%,#070809 45%) fixed,#070809;font-family:"Eurostile","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:600} :root[data-theme="lcars"] .brand{font-family:"Eurostile","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:600;letter-spacing:.1em} :root[data-theme="lcars"] .panel,:root[data-theme="lcars"] .card,:root[data-theme="lcars"] .chip{box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 10px 30px rgba(0,0,0,.45),0 0 40px var(--panel-glow) inset} +:root[data-theme="lcars"] .progress .bar{background:linear-gradient(90deg,#FF9A3C,#FFD79A)} +:root[data-theme="lcars"] .progress .bar.active{animation:lcars-sheen 1.6s linear infinite} +@keyframes lcars-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} diff --git a/docs/scifi-ui/styles/starwars.css b/docs/scifi-ui/styles/starwars.css index 7b2751f..0f05bb3 100644 --- a/docs/scifi-ui/styles/starwars.css +++ b/docs/scifi-ui/styles/starwars.css @@ -1,10 +1,11 @@ -:root[data-theme="starwars"]{--bg:#061118;--text:#dffcff;--muted:#9be4f1;--accent:#2EE6FF;--accent-2:#90F0FF;--border:#2EE6FF;--panel:#0c2a3740;--card:#0d2e3a66;--grid-glow:rgba(46,230,255,0.08)} +:root[data-theme="starwars"]{--bg:#061118;--text:#dffcff;--muted:#9be4f1;--sw-main:#2EE6FF;--sw-accent:#90F0FF;--accent:#2EE6FF;--accent-2:#90F0FF;--border:#2EE6FF;--panel:#0c2a3740;--card:#0d2e3a66;--grid-glow:rgba(46,230,255,0.08)} :root[data-theme="starwars"] body{background:radial-gradient(1200px 600px at 50% -10%,#0f2a3a 0%,#061118 45%) fixed,#061118;font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace;letter-spacing:.06em} :root[data-theme="starwars"] .brand{font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace;letter-spacing:.06em;text-shadow:0 0 18px #73ffff55,0 0 3px #72ffff} :root[data-theme="starwars"] .panel,:root[data-theme="starwars"] .card,:root[data-theme="starwars"] .chip{border-color:color-mix(in oklab,var(--accent),#000 35%);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 22px #6df6ff22,inset 0 0 26px #6df6ff11} :root[data-theme="starwars"] .fx.holo-grid{opacity:.28;mix-blend-mode:screen;filter:drop-shadow(0 0 6px var(--grid-glow))} -:root[data-theme="starwars"] .fx.holo-grid .hud-line{stroke:#2EE6FF;stroke-opacity:.35;stroke-width:.3;stroke-dasharray:6 8;stroke-dashoffset:0;animation:hud-dash 2s linear infinite} -@keyframes hud-dash{to{stroke-dashoffset:-14}} +:root[data-theme="starwars"] .fx.holo-grid .hud-line{stroke:#2EE6FF;stroke-opacity:.35;stroke-width:.3;stroke-dasharray:6 8;stroke-dashoffset:0;animation:sw-grid 2s linear infinite} +@keyframes sw-grid{to{stroke-dashoffset:-14}} +:root[data-theme="starwars"] .progress .bar{background:linear-gradient(90deg,rgba(46,230,255,0.12),rgba(144,240,255,0.06))} :root[data-theme="starwars"] .preloader__lcars .preloader__bar{background:linear-gradient(90deg,#2EE6FF,#0AA1C4)} :root[data-theme="starwars"] .preloader__label{color:#bff5ff} :root[data-theme="starwars"] .brand::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 30%, rgba(144,240,255,.18) 45%, transparent 60%);animation:holo-sheen 1.8s ease-in-out infinite;mask:linear-gradient(#000,#000)} From d11ecc0b3bba1a91337e02db680a86072749231d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:28:38 +0000 Subject: [PATCH 4/7] =?UTF-8?q?scripts=20=E2=80=94=20Implement=20behavior?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- docs/scifi-ui/scripts/anim-controller.js | 35 ++++++++++++++++++++++-- docs/scifi-ui/scripts/preloader.js | 25 +++++++++++++++-- docs/scifi-ui/scripts/theme-switcher.js | 4 ++- 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/docs/scifi-ui/scripts/anim-controller.js b/docs/scifi-ui/scripts/anim-controller.js index e6c5f79..2491bca 100644 --- a/docs/scifi-ui/scripts/anim-controller.js +++ b/docs/scifi-ui/scripts/anim-controller.js @@ -8,8 +8,39 @@ cyberpunk:``, lcars:'' }; - function activate(theme){clearLayers(); if(SVGS[theme]) layersHost.appendChild(elFrom(SVGS[theme]));} + function activateThemeAnimations(theme){ + const bars=document.querySelectorAll('.progress .bar'); + bars.forEach(bar=>{ + if(theme==='lcars'){ + bar.style.transition='width 1.6s cubic-bezier(.2,.9,.2,1)'; + }else if(theme==='starwars'){ + bar.style.transition='width 1.8s ease-in-out'; + layersHost.classList.add('hud-active'); + }else if(theme==='cyberpunk'){ + bar.style.transition='width 1.2s steps(6,end)'; + bar.classList.add('glitch'); + } + }); + } + function activate(theme){clearLayers(); if(SVGS[theme]) layersHost.appendChild(elFrom(SVGS[theme])); activateThemeAnimations(theme);} activate(document.documentElement.getAttribute('data-theme')||'lcars'); document.addEventListener('theme:changed',e=>{activate(e.detail.theme)}); - document.addEventListener('preloader:done',()=>{ if(prefersReduced) return; let raf=0; const onMove=(ev)=>{cancelAnimationFrame(raf); raf=requestAnimationFrame(()=>{const x=(ev.clientX/innerWidth-.5)*4; const y=(ev.clientY/innerHeight-.5)*4; layersHost.style.transform=`translate(${x}px, ${y}px)`;});}; window.addEventListener('pointermove',onMove,{passive:true});}); + document.addEventListener('preloader:done',()=>{ + const bars=document.querySelectorAll('.loader-sample .bar'); + bars.forEach(bar=>{ + bar.style.width='100%'; + bar.classList.add('active'); + }); + if(prefersReduced) return; + let raf=0; + const onMove=(ev)=>{ + cancelAnimationFrame(raf); + raf=requestAnimationFrame(()=>{ + const x=(ev.clientX/innerWidth-.5)*4; + const y=(ev.clientY/innerHeight-.5)*4; + layersHost.style.transform=`translate(${x}px, ${y}px)`; + }); + }; + window.addEventListener('pointermove',onMove,{passive:true}); + }); })(); diff --git a/docs/scifi-ui/scripts/preloader.js b/docs/scifi-ui/scripts/preloader.js index 2735fb9..d8994d0 100644 --- a/docs/scifi-ui/scripts/preloader.js +++ b/docs/scifi-ui/scripts/preloader.js @@ -1,7 +1,28 @@ (function(){ const pre=document.getElementById('preloader'); if(!pre) return; + pre.setAttribute('role','status'); + pre.setAttribute('aria-live','polite'); const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)').matches; const assets=['styles/base.css','styles/themes.css','styles/lcars.css','styles/starwars.css','styles/cyberpunk.css','assets/svgs/hud-grid.svg']; - let done=0; function tick(){done++; const now=Math.min(100,Math.round(done/assets.length*100)); pre.setAttribute('aria-valuenow',String(now));} - Promise.all(assets.map(u=>fetch(u,{cache:'force-cache'}).then(r=>{tick();return r.ok;}).catch(()=>{tick();}))).then(()=>new Promise(res=>setTimeout(res,prefersReduced?100:600))).finally(()=>{pre.hidden=true; document.dispatchEvent(new CustomEvent('preloader:done'));}); + let progress=0; + function setProgress(val){progress=val; pre.setAttribute('aria-valuenow',String(Math.min(100,val)));} + function tick(n){setProgress(progress+n);} + if(prefersReduced){ + setProgress(100); + setTimeout(()=>{pre.style.display='none';pre.setAttribute('aria-hidden','true');document.dispatchEvent(new CustomEvent('preloader:done'));},100); + }else{ + Promise.all(assets.map(u=>fetch(u,{cache:'force-cache'}).then(r=>r.ok).catch(()=>false))).then(()=>{ + const theme=document.documentElement.getAttribute('data-theme')||'lcars'; + const jitter=()=>60+Math.random()*30; + const step=()=>{ + if(progress>=100){ + setTimeout(()=>{pre.style.display='none';pre.setAttribute('aria-hidden','true');document.dispatchEvent(new CustomEvent('preloader:done'));},200); + }else{ + tick(theme==='lcars'?6:theme==='starwars'?5:8); + setTimeout(step,jitter()); + } + }; + step(); + }); + } })(); diff --git a/docs/scifi-ui/scripts/theme-switcher.js b/docs/scifi-ui/scripts/theme-switcher.js index 19e52e4..c899867 100644 --- a/docs/scifi-ui/scripts/theme-switcher.js +++ b/docs/scifi-ui/scripts/theme-switcher.js @@ -6,7 +6,9 @@ const brand=document.getElementById('brand'); function setPressed(btn,on){btn.setAttribute('aria-pressed',String(on));btn.setAttribute('aria-selected',String(on));} function toggleGlitch(theme){if(!brand)return; if(theme==='cyberpunk'){brand.setAttribute('data-glitch','on');}else{brand.removeAttribute('data-glitch');}} - function setTheme(name){if(!THEMES[name])return; linkEl.setAttribute('href',THEMES[name]); root.setAttribute('data-theme',name); try{localStorage.setItem(STORAGE_KEY,name);}catch(e){}; toggleGlitch(name); document.querySelectorAll('.switcher .theme').forEach(b=>setPressed(b,b.dataset.theme===name)); document.dispatchEvent(new CustomEvent('theme:changed',{detail:{theme:name}}));} + function toggleLoaderSamples(theme){document.querySelectorAll('.loader-sample').forEach(el=>{if(el.dataset.themeSample===theme){el.style.display='block';}else{el.style.display='none';}});} + function setTheme(name){if(!THEMES[name])return; linkEl.setAttribute('href',THEMES[name]); root.setAttribute('data-theme',name); try{localStorage.setItem(STORAGE_KEY,name);}catch(e){}; toggleGlitch(name); toggleLoaderSamples(name); document.querySelectorAll('.switcher .theme').forEach(b=>setPressed(b,b.dataset.theme===name)); document.dispatchEvent(new CustomEvent('theme:changed',{detail:{theme:name}}));} let start='lcars'; try{const saved=localStorage.getItem(STORAGE_KEY); if(saved&&THEMES[saved]) start=saved;}catch(e){}; setTheme(start); document.querySelectorAll('.switcher .theme').forEach(btn=>{btn.addEventListener('click',()=>setTheme(btn.dataset.theme)); btn.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();setTheme(btn.dataset.theme);}})}); + window.setTheme=setTheme; })(); From 73f386ee631f483b7017e80fd3870a1992591b57 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:29:35 +0000 Subject: [PATCH 5/7] =?UTF-8?q?assets=20placeholders=20=E2=80=94=20Add=20p?= =?UTF-8?q?laceholder=20SVGs,=20keep=20.gitkeep,=20document=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- docs/scifi-ui/assets/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/scifi-ui/assets/README.md diff --git a/docs/scifi-ui/assets/README.md b/docs/scifi-ui/assets/README.md new file mode 100644 index 0000000..1b4e880 --- /dev/null +++ b/docs/scifi-ui/assets/README.md @@ -0,0 +1,24 @@ +# Assets + +All assets are original placeholders created for this demo. No unlicensed IP is used. + +## Structure + +- `images/` - WebP/AVIF optimized images (empty, .gitkeep maintained) +- `svgs/` - Animated SVG assets: + - `hud-grid.svg` - Star Wars-style HUD grid overlay + - `lcars-panels.svg` - LCARS-style panel placeholder + - `hologram-activation.svg` - Holographic activation effect +- `fonts/` - Font files (empty, .gitkeep maintained, system fallbacks used) +- `audio/` - Optional ambient sounds (empty, .gitkeep maintained) + +## License + +All SVG files are original works created specifically for this demo. They are inspired by sci-fi aesthetics but contain no trademarked logos, copyrighted imagery, or unlicensed IP. + +System font stacks are used throughout: +- LCARS: "Eurostile", "Segoe UI", system-ui +- Star Wars: "Orbitron", "Roboto Mono", ui-monospace +- Cyberpunk: "OCR-A", "VT323", ui-monospace + +When licensed fonts are added, update the commented preload tags in `index.html`. From fc3a63ee0374de1e0f1c6a4fb016bea94cd9ca21 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:30:50 +0000 Subject: [PATCH 6/7] =?UTF-8?q?README=20=E2=80=94=20Update=20with=20Pages?= =?UTF-8?q?=20setup,=20asset=20inventory,=20and=20CI=20thresholds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- docs/scifi-ui/README.md | 66 ++++++++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 21 deletions(-) diff --git a/docs/scifi-ui/README.md b/docs/scifi-ui/README.md index 62c811b..6f915a4 100644 --- a/docs/scifi-ui/README.md +++ b/docs/scifi-ui/README.md @@ -123,18 +123,26 @@ npx lighthouse http://localhost:8000/scifi-ui/ --view ### Lighthouse Thresholds (CI) -- Performance: ≥ 90% -- Accessibility: ≥ 95% -- Best Practices: ≥ 95% -- SEO: ≥ 90% +The CI workflow enforces these thresholds: +- **Performance**: ≥ 90% +- **Accessibility**: ≥ 95% +- **Best Practices**: ≥ 95% +- **SEO**: ≥ 90% -Run Lighthouse CI: +**Core Web Vitals:** +- LCP (Largest Contentful Paint): < 2.5s +- CLS (Cumulative Layout Shift): < 0.10 +- TTFB (Time to First Byte): < 600ms + +Run Lighthouse CI locally: ```bash npm install -g @lhci/cli lhci autorun ``` +View results in `.lighthouseci/` directory after running. + ## 🔧 JavaScript Modules ### theme-switcher.js @@ -189,28 +197,44 @@ document.addEventListener('theme:changed', (e) => { ## 📄 Assets & Licenses -### Created Assets +### Asset Inventory + +All assets in `docs/scifi-ui/assets/`: + +**SVG Files:** +- `svgs/hud-grid.svg` — Star Wars-style HUD grid overlay (original work) +- `svgs/lcars-panels.svg` — LCARS-style panel decorations (original work) +- `svgs/hologram-activation.svg` — Holographic activation effect (original work) + +**Placeholder Directories (with .gitkeep):** +- `images/` — Reserved for WebP/AVIF optimized images +- `fonts/` — Reserved for licensed fonts (currently using system stacks) +- `audio/` — Reserved for optional ambient sounds -All visual assets are created with CSS and SVG: +### License Status -- **hud-grid.svg**: Minimal Star Wars-style HUD grid (original work) -- **CSS animations**: All effects implemented in pure CSS -- **Fonts**: System font stacks used (no external fonts loaded) +✅ **All assets are original placeholders** created specifically for this demo +✅ **No unlicensed IP used** — No trademarked logos, copyrighted imagery, or proprietary content +✅ **System font stacks** — No external fonts loaded; commented preload examples in index.html -### Fonts Used +**Fonts:** +- LCARS: `"Eurostile", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif` +- Star Wars: `"Orbitron", "Roboto Mono", ui-monospace, system-ui, monospace` +- Cyberpunk: `"OCR-A", "VT323", ui-monospace, monospace` -System fallbacks (no licensing required): -- LCARS: `"Eurostile", "Microgramma", "Orbitron", "Exo 2", system-ui` -- Star Wars: `"Share Tech Mono", "Orbitron", ui-monospace` -- Cyberpunk: `"OCR A", "Audiowide", "Exo 2", system-ui` +**Font Setup Instructions:** +When licensed fonts are available: +1. Add woff2 files to `assets/fonts/` +2. Uncomment preload tags in `index.html` `` +3. Add `@font-face` declarations in respective theme CSS files +4. Update README with font licenses -### No Unlicensed IP +### What This Demo Does NOT Include -This demo does **NOT** include: -- Trademarked logos or symbols -- Copyrighted imagery from films/shows -- Licensed sound effects or music -- Proprietary typefaces +- ❌ Trademarked logos or symbols +- ❌ Copyrighted imagery from films/shows +- ❌ Licensed sound effects or music +- ❌ Proprietary typefaces All designs are inspired aesthetics created from scratch. From 94acba9307ed142c8173b3a9054dffbaf97a0f5c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 21:32:06 +0000 Subject: [PATCH 7/7] =?UTF-8?q?CI=20=E2=80=94=20Add=20Lighthouse=20thresho?= =?UTF-8?q?lds,=20PR=20comments,=20and=20Pages=20notification?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- .github/workflows/ci.yml | 70 ++++++++++++++++++++++++++++++++++++++++ lighthouserc.json | 5 ++- 2 files changed, 74 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8f27197..449bcca 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,6 +14,9 @@ on: jobs: lighthouse: runs-on: ubuntu-latest + permissions: + contents: read + pull-requests: write steps: - name: Checkout uses: actions/checkout@v4 @@ -39,3 +42,70 @@ jobs: name: lighthouse-results path: .lighthouseci/ retention-days: 30 + + - name: Comment PR with Lighthouse results + uses: actions/github-script@v7 + if: github.event_name == 'pull_request' + with: + script: | + const fs = require('fs'); + const path = require('path'); + + // Find the latest manifest file + const lhciDir = '.lighthouseci'; + const files = fs.readdirSync(lhciDir); + const manifestFile = files.find(f => f.startsWith('manifest') && f.endsWith('.json')); + + if (!manifestFile) { + console.log('No manifest file found'); + return; + } + + const manifest = JSON.parse(fs.readFileSync(path.join(lhciDir, manifestFile), 'utf8')); + const lhr = JSON.parse(fs.readFileSync(manifest[0].jsonPath, 'utf8')); + + const scores = { + performance: Math.round(lhr.categories.performance.score * 100), + accessibility: Math.round(lhr.categories.accessibility.score * 100), + bestPractices: Math.round(lhr.categories['best-practices'].score * 100), + seo: Math.round(lhr.categories.seo.score * 100) + }; + + const vitals = { + lcp: lhr.audits['largest-contentful-paint'].numericValue, + cls: lhr.audits['cumulative-layout-shift'].numericValue, + ttfb: lhr.audits['server-response-time'].numericValue + }; + + const body = `## 🚦 Lighthouse CI Results + + | Category | Score | + |----------|-------| + | 🎨 Performance | ${scores.performance}% | + | ♿ Accessibility | ${scores.accessibility}% | + | ✅ Best Practices | ${scores.bestPractices}% | + | 🔍 SEO | ${scores.seo}% | + + ### Core Web Vitals + + | Metric | Value | Threshold | + |--------|-------|-----------| + | LCP | ${(vitals.lcp / 1000).toFixed(2)}s | < 2.5s | + | CLS | ${vitals.cls.toFixed(3)} | < 0.10 | + | TTFB | ${vitals.ttfb.toFixed(0)}ms | < 600ms | + + ${scores.performance >= 90 && scores.accessibility >= 95 && scores.bestPractices >= 95 && scores.seo >= 90 ? '✅ All thresholds passed!' : '❌ Some thresholds failed. Please review and fix.'} + `; + + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: body + }); + + - name: Notify Pages deployment + if: github.event_name == 'push' && github.ref == 'refs/heads/master' + run: | + echo "✅ Merged to master! GitHub Pages will serve the demo from /docs at:" + echo " https://hutoczky.github.io/FormatX/scifi-ui/" diff --git a/lighthouserc.json b/lighthouserc.json index 47cd665..33e93a4 100644 --- a/lighthouserc.json +++ b/lighthouserc.json @@ -13,7 +13,10 @@ "categories:performance": ["error", {"minScore": 0.9}], "categories:accessibility": ["error", {"minScore": 0.95}], "categories:best-practices": ["error", {"minScore": 0.95}], - "categories:seo": ["error", {"minScore": 0.9}] + "categories:seo": ["error", {"minScore": 0.9}], + "largest-contentful-paint": ["error", {"maxNumericValue": 2500}], + "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}], + "server-response-time": ["error", {"maxNumericValue": 600}] } }, "upload": {