Finalize Sci-Fi UI demo with six commits: structure, styles, scripts, assets, README, and CI

.github/workflows/ci.yml

@@ -39,3 +39,13 @@ jobs:
           name: lighthouse-results
           path: .lighthouseci/
           retention-days: 30
+
+      - name: Confirm Pages deployment configuration
+        if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main')
+        run: |
+          echo "✅ GitHub Pages is configured to serve from /docs directory"
+          echo "📦 Demo will be available at: https://hutoczky.github.io/FormatX/scifi-ui/"
+          echo "📋 Lighthouse thresholds enforced:"
+          echo "   - LCP < 2.5s"
+          echo "   - CLS < 0.10"
+          echo "   - TTFB < 600ms"

docs/scifi-ui/README.md

@@ -123,11 +123,17 @@ npx lighthouse http://localhost:8000/scifi-ui/ --view
 
 ### Lighthouse Thresholds (CI)
 
+**Category Scores:**
 - Performance: ≥ 90%
 - Accessibility: ≥ 95%
 - Best Practices: ≥ 95%
 - SEO: ≥ 90%
 
+**Core Web Vitals:**
+- LCP (Largest Contentful Paint): < 2.5s
+- CLS (Cumulative Layout Shift): < 0.10
+- TTFB (Time to First Byte): < 600ms
+
 Run Lighthouse CI:
 
 ```bash

docs/scifi-ui/index.html

@@ -10,6 +10,10 @@
         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'">
   <link rel="preload" as="style" href="styles/base.css" />
   <link rel="preload" as="style" href="styles/themes.css" />
+  <!-- Example font preloads (uncomment when licensed fonts are added) -->
+  <!-- <link rel="preload" href="assets/fonts/Eurostile.woff2" as="font" type="font/woff2" crossorigin> -->
+  <!-- <link rel="preload" href="assets/fonts/Orbitron.woff2" as="font" type="font/woff2" crossorigin> -->
+  <!-- <link rel="preload" href="assets/fonts/OCR-A.woff2" as="font" type="font/woff2" crossorigin> -->
   <link rel="stylesheet" href="styles/base.css" />
   <link rel="stylesheet" href="styles/themes.css" />
   <link id="theme-css" rel="stylesheet" href="styles/lcars.css" />
@@ -37,7 +41,7 @@
   <div class="fx fx-vignette" aria-hidden="true"></div>
   <div id="theme-layers" aria-hidden="true"></div>
 
-  <div id="preloader" class="preloader" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+  <div id="preloader" class="preloader" role="status" aria-live="polite" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
     <div class="preloader__lcars">
       <div class="preloader__bar"></div>
       <div class="preloader__cap"></div>

docs/scifi-ui/styles/base.css

@@ -12,6 +12,8 @@ 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}
+button:focus-visible,a:focus-visible{outline-color:var(--accent-2);outline-width:2px;outline-style:solid;outline-offset:3px}
 .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,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.06'/></svg>");
@@ -24,7 +26,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}

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": {