+
FormatX Light telepítő (v1.0.4)
Windows .exe • hutoczky/formatui v1.0.4
-
+
README.txt
Kiindulási információk • hutoczky/formatui v1.0.4
-
+
LICENSE.txt
Licencfeltételek • hutoczky/formatui v1.0.4
-
+
Windows App Runtime (x64)
Microsoft telepítő • hutoczky/formatui v1.0.4
-
+
.NET Desktop Runtime 10.0 (x64)
Microsoft telepítő • hutoczky/formatui v1.0.4
diff --git a/docs/scifi-ui/styles/cyberpunk.css b/docs/scifi-ui/styles/cyberpunk.css
index f5d544e..a1252dd 100644
--- a/docs/scifi-ui/styles/cyberpunk.css
+++ b/docs/scifi-ui/styles/cyberpunk.css
@@ -23,16 +23,25 @@ body::before{
.chrome::before{ content:""; position:fixed; inset:10px; border:1px solid var(--border); border-radius:16px; box-shadow: 0 0 18px rgba(0,255,245,.25), inset 0 0 18px rgba(255,0,184,.15); pointer-events:none }
nav{ background: linear-gradient(90deg, rgba(255,0,184,.18), rgba(0,255,245,.18)); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px) }
-nav button, .panel .btn, .quick-links a, .download-card{
+nav button, .panel .btn, .quick-links a{
appearance:none; border:1px solid var(--border); border-radius:10px; padding:.6rem .95rem;
background: radial-gradient(120px 40px at 20% 0%, rgba(0,255,245,.22), transparent 60%), linear-gradient(180deg, rgba(255,0,184,.18), rgba(0,255,245,.18)), linear-gradient(180deg, rgba(10,12,24,.9), rgba(10,12,24,.5));
- color: var(--text); text-shadow: 0 0 10px rgba(0,255,245,.55); text-decoration:none
+ color: var(--text); text-shadow: 0 0 10px rgba(0,255,245,.55); text-decoration:none; transition: all 0.2s ease
}
-.download-card small{ color: var(--text) }
+nav button:hover, nav button:focus, .panel .btn:hover, .panel .btn:focus, .quick-links a:hover, .quick-links a:focus{ box-shadow: 0 0 20px rgba(255,0,184,.3), 0 4px 12px rgba(0,255,245,.2); transform: translateY(-1px) }
+nav button:focus, .panel .btn:focus, .quick-links a:focus{ outline: 2px solid var(--neon); outline-offset: 2px }
.mirror{ color: var(--neon) }
.features .box{ background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; box-shadow: 0 0 18px rgba(255,0,184,.18) inset }
+/* Download section */
+.download-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin: 1rem 0 }
+@media (max-width: 700px){ .download-list{ grid-template-columns: 1fr } }
+.download-card{ display: block; width: 100%; white-space: normal; word-break: break-word; padding: 1rem; background: linear-gradient(180deg, rgba(10,12,24,.85), rgba(10,12,24,.65)); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; text-shadow: 0 0 6px rgba(0,255,245,.35); box-shadow: 0 0 16px rgba(255,0,184,.12) inset; transition: all 0.2s ease }
+.download-card:hover, .download-card:focus{ transform: translateY(-2px); border-color: var(--magenta); box-shadow: 0 0 24px rgba(255,0,184,.25) inset, 0 4px 16px rgba(255,0,184,.2); text-shadow: 0 0 10px var(--magenta) }
+.download-card:focus{ outline: 2px solid var(--neon); outline-offset: 2px }
+.download-card small{ display: block; margin-top: 0.4rem; color: rgba(233,236,255,.75); font-size: 0.85em }
+
/* Cím glitch (biztonságos, CSS rétegelt eltolás) */
h1{ position:relative; text-shadow: 0 0 10px rgba(0,255,245,.4), 0 0 20px rgba(255,0,184,.3) }
@media (prefers-reduced-motion:no-preference){
@@ -43,15 +52,31 @@ h1{ position:relative; text-shadow: 0 0 10px rgba(0,255,245,.4), 0 0 20px rgba(2
h1{ animation: glitchShift 3.2s ease-in-out infinite }
}
-/* Telemetria: diagonális neon adatáram + finom villódzás */
+/* Telemetria: diagonális neon sweep + code rain textúra + chromatic aberration */
.telemetry{
background:
linear-gradient(120deg, rgba(255,0,184,.10), rgba(0,255,245,.08) 60%, rgba(255,234,0,.08)),
- repeating-linear-gradient(120deg, rgba(0,255,245,.06) 0 2px, transparent 2px 22px);
- background-size: 200% 200%, 120% 120%;
+ repeating-linear-gradient(120deg, rgba(0,255,245,.06) 0 2px, transparent 2px 22px),
+ repeating-linear-gradient(180deg, rgba(0,255,245,.02) 0 1px, transparent 1px 8px);
+ background-size: 200% 200%, 120% 120%, 100% 100%;
animation: cp-stream 7.5s linear infinite, cp-flicker 3.8s ease-in-out infinite;
mix-blend-mode: screen;
}
+@keyframes cp-stream{ 0%{ background-position: 0% 0%, 0% 0%, 0 0 } 100%{ background-position: 200% 200%, 120% 120%, 0 -120px } }
+@keyframes cp-flicker{ 0%,100%{ opacity: .32 } 50%{ opacity: .42 } }
+/* Diagonális neon sweep (erősebb glitch hatás) */
+.telemetry::before{
+ content:""; position:fixed; left:-50%; top:-50%; width:100%; height:200%;
+ background: linear-gradient(135deg, transparent 40%, rgba(255,0,184,.25) 48%, rgba(0,255,245,.25) 52%, transparent 60%);
+ filter: blur(15px); opacity:.4; mix-blend-mode: screen; animation: neon-sweep 8s linear infinite; pointer-events:none;
+}
+@keyframes neon-sweep{ 0%{ transform: translate(-100%, -100%) } 100%{ transform: translate(100%, 100%) } }
+/* Chromatic aberration hatás a .chrome kereten */
+.chrome::before{
+ filter: drop-shadow(2px 0 1px rgba(255,0,184,.25)) drop-shadow(-2px 0 1px rgba(0,255,245,.25));
+ animation: aberration-pulse 4s ease-in-out infinite;
+}
+@keyframes aberration-pulse{ 0%,100%{ filter: drop-shadow(2px 0 1px rgba(255,0,184,.25)) drop-shadow(-2px 0 1px rgba(0,255,245,.25)) } 50%{ filter: drop-shadow(3px 0 2px rgba(255,0,184,.35)) drop-shadow(-3px 0 2px rgba(0,255,245,.35)) } }
@keyframes cp-stream{ 0%{ background-position: 0% 0%, 0% 0% } 100%{ background-position: 200% 200%, 120% 120% } }
@keyframes cp-flicker{ 0%,100%{ opacity: .32 } 50%{ opacity: .42 } }
diff --git a/docs/scifi-ui/styles/lcars.css b/docs/scifi-ui/styles/lcars.css
index 8a08a40..2ad3711 100644
--- a/docs/scifi-ui/styles/lcars.css
+++ b/docs/scifi-ui/styles/lcars.css
@@ -21,7 +21,7 @@ body::before{
}
@keyframes nebula-drift{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-1.2rem,.6rem,0)} 100%{transform:translate3d(0,0,0)} }
-/* Képernyő “chrome” — LCARS felső sínek */
+/* Képernyő "chrome" — LCARS felső sínek + íves panelek */
.chrome::before, .chrome::after{
content:""; position:fixed; left:0; right:0; height:22px; z-index:1; pointer-events:none;
background: var(--rail); box-shadow: inset 0 -2px 6px rgba(0,0,0,.25);
@@ -29,15 +29,33 @@ body::before{
}
.chrome::after{ height:4px; margin-top:26px; background: var(--rail2); border-radius: 2px; opacity:.95; animation:none }
@keyframes rail-flow{ 0%,100%{ filter:hue-rotate(0deg) brightness(1) } 50%{ filter:hue-rotate(-10deg) brightness(1.1) } }
+/* LCARS íves rail panelek és halvány grid overlay */
+.chrome{
+ background:
+ repeating-linear-gradient(0deg, rgba(247,191,164,.02) 0 2px, transparent 2px 30px),
+ repeating-linear-gradient(90deg, rgba(224,138,163,.02) 0 4px, transparent 4px 40px),
+ linear-gradient(90deg, var(--rail) 0 6px, transparent 6px),
+ linear-gradient(90deg, transparent calc(100% - 6px), var(--rail2) calc(100% - 6px));
+ opacity: .28;
+}
nav{ backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(10,14,24,.72), rgba(10,14,24,.38)); border-bottom:0 }
-nav button, .panel .btn, .quick-links a, .download-card{
- appearance:none; border:0; border-radius:18px; padding:.6rem .95rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#051018; text-decoration:none; box-shadow:0 2px 8px rgba(126,200,255,.25)
+nav button, .panel .btn, .quick-links a{
+ appearance:none; border:0; border-radius:18px; padding:.6rem .95rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#051018; text-decoration:none; box-shadow:0 2px 8px rgba(126,200,255,.25); transition: all 0.2s ease
}
-.download-card small{ color:#051018 }
+nav button:hover, nav button:focus, .panel .btn:hover, .panel .btn:focus, .quick-links a:hover, .quick-links a:focus{ box-shadow: 0 4px 12px rgba(126,200,255,.4); transform: translateY(-1px) }
+nav button:focus, .panel .btn:focus, .quick-links a:focus{ outline: 2px solid var(--accent); outline-offset: 2px }
.mirror{ color:var(--accent) }
.features .box{ background: var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow: inset 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(247,191,164,.05) }
+/* Download section */
+.download-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin: 1rem 0 }
+@media (max-width: 700px){ .download-list{ grid-template-columns: 1fr } }
+.download-card{ display: block; width: 100%; white-space: normal; word-break: break-word; padding: 1rem; background: linear-gradient(180deg, rgba(10,14,24,.65), rgba(10,14,24,.45)); border: 2px solid var(--border); border-radius: 18px; color: var(--accent); text-decoration: none; font-weight: 700; box-shadow: inset 0 6px 20px rgba(0,0,0,.15), 0 0 0 1px rgba(126,200,255,.08); transition: all 0.2s ease }
+.download-card:hover, .download-card:focus{ transform: translateY(-2px); border-color: var(--rail); box-shadow: inset 0 6px 20px rgba(0,0,0,.15), 0 4px 12px rgba(247,191,164,.2), 0 0 0 1px var(--rail) }
+.download-card:focus{ outline: 2px solid var(--accent); outline-offset: 2px }
+.download-card small{ display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.85em; font-weight: 400 }
+
/* Folyamatos “process” telemetria a háttérben */
.telemetry{
background:
diff --git a/docs/scifi-ui/styles/starwars.css b/docs/scifi-ui/styles/starwars.css
index 5eb841a..9980c1d 100644
--- a/docs/scifi-ui/styles/starwars.css
+++ b/docs/scifi-ui/styles/starwars.css
@@ -8,24 +8,33 @@
*{ box-sizing:border-box } html,body{ height:100% }
body{ margin:0; background: var(--bg); color: var(--text); font-family:"Aurebesh","Share Tech Mono","Orbitron",ui-monospace,monospace; position:relative; overflow-x:hidden }
-/* Csillagmező + scanlines */
+/* Csillagmező + scanlines — dinamikusabb */
body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2 }
-body::before{ background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent 50%), radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,.35), transparent 50%); animation: stars-move 70s linear infinite; opacity:.8 }
-body::after{ background: repeating-linear-gradient(0deg, rgba(96,229,255,.08) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity:.16; animation: scanlines 6s linear infinite }
-@keyframes stars-move{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-1200px) } }
-@keyframes scanlines{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-3px) } }
+body::before{ background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.8), transparent 50%), radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.75), transparent 50%), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.7), transparent 50%), radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,.45), transparent 50%), radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,.6), transparent 50%), radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.5), transparent 50%), radial-gradient(2px 2px at 45% 15%, rgba(255,255,255,.4), transparent 50%); animation: stars-move 80s linear infinite; opacity:.85 }
+body::after{ background: repeating-linear-gradient(0deg, rgba(96,229,255,.08) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity:.12; animation: scanlines 8s linear infinite }
+@keyframes stars-move{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-1400px) } }
+@keyframes scanlines{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-4px) } }
/* Holografikus képernyőkeret (grid overlay) */
.chrome{ background: linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0/ 40px 40px, linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0/ 40px 40px; opacity:.35 }
/* NAV / CTA */
nav{ background: rgba(5,10,18,.55); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); box-shadow: 0 0 20px rgba(96,229,255,.10) inset }
-nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border:1px solid var(--border); border-radius:8px; padding:.6rem .95rem; background: linear-gradient(180deg, rgba(10,20,28,.55), rgba(10,20,28,.25)); color: var(--holo2); text-shadow: 0 0 8px rgba(96,229,255,.6); text-decoration:none }
-.download-card small{ color: var(--holo2) }
+nav button, .panel .btn, .quick-links a{ appearance:none; border:1px solid var(--border); border-radius:8px; padding:.6rem .95rem; background: linear-gradient(180deg, rgba(10,20,28,.55), rgba(10,20,28,.25)); color: var(--holo2); text-shadow: 0 0 6px rgba(96,229,255,.5); text-decoration:none; transition: all 0.2s ease }
+nav button:hover, nav button:focus, .panel .btn:hover, .panel .btn:focus, .quick-links a:hover, .quick-links a:focus{ box-shadow: 0 0 16px rgba(96,229,255,.3); transform: translateY(-1px) }
+nav button:focus, .panel .btn:focus, .quick-links a:focus{ outline: 2px solid var(--holo); outline-offset: 2px }
.mirror{ color: var(--holo2) }
.features .box{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 0 24px rgba(96,229,255,.12) inset }
-/* Telemetria: adatfolyam oszlopok + holografikus “sweep” */
+/* Download section */
+.download-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin: 1rem 0 }
+@media (max-width: 700px){ .download-list{ grid-template-columns: 1fr } }
+.download-card{ display: block; width: 100%; white-space: normal; word-break: break-word; padding: 1rem; background: linear-gradient(180deg, rgba(10,20,28,.55), rgba(10,20,28,.25)); border: 1px solid var(--border); border-radius: 8px; color: var(--holo2); text-decoration: none; text-shadow: 0 0 4px rgba(96,229,255,.4); box-shadow: 0 0 16px rgba(96,229,255,.08) inset; transition: all 0.2s ease }
+.download-card:hover, .download-card:focus{ transform: translateY(-2px); box-shadow: 0 0 24px rgba(96,229,255,.18) inset, 0 4px 12px rgba(96,229,255,.15); border-color: var(--holo) }
+.download-card:focus{ outline: 2px solid var(--holo); outline-offset: 2px }
+.download-card small{ display: block; margin-top: 0.4rem; color: rgba(230,251,255,.7); font-size: 0.85em }
+
+/* Telemetria: adatfolyam + holografikus "sweep" körpályán + HUD gyűrűk */
.telemetry{
background:
repeating-linear-gradient(90deg, rgba(96,229,255,.055) 0 1px, transparent 1px 18px),
@@ -33,12 +42,21 @@ nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border
animation: sw-stream-x 9s linear infinite;
}
@keyframes sw-stream-x{ 0%{ background-position: 0 0, 0 0 } 100%{ background-position: -320px 0, 0 0 } }
+/* Radiális holografikus sweep (körmozgás) */
+.telemetry::before{
+ content:""; position:fixed; top:50%; left:50%; width:600px; height:600px; margin:-300px 0 0 -300px;
+ background: conic-gradient(from 0deg, rgba(96,229,255,.0), rgba(96,229,255,.15) 15%, rgba(96,229,255,.0) 30%);
+ border-radius:50%; filter: blur(20px); opacity:.4; mix-blend-mode: screen; animation: holo-rotate 12s linear infinite; pointer-events:none;
+}
+@keyframes holo-rotate{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } }
+/* Concentric HUD gyűrűk (halvány) */
.telemetry::after{
- content:""; position:fixed; left:-25%; top:0; width:35%; height:100%;
- background: linear-gradient(90deg, rgba(96,229,255,.0), rgba(96,229,255,.20), rgba(96,229,255,.0));
- filter: blur(10px); opacity:.35; mix-blend-mode: screen; animation: holo-sweep 2.8s linear infinite;
+ content:""; position:fixed; top:50%; left:50%; width:500px; height:500px; margin:-250px 0 0 -250px;
+ border-radius:50%;
+ background: radial-gradient(circle, transparent 48%, rgba(96,229,255,.12) 48.5%, rgba(96,229,255,.12) 49%, transparent 49.5%), radial-gradient(circle, transparent 68%, rgba(96,229,255,.08) 68.5%, rgba(96,229,255,.08) 69%, transparent 69.5%), radial-gradient(circle, transparent 88%, rgba(96,229,255,.06) 88.5%, rgba(96,229,255,.06) 89%, transparent 89.5%);
+ opacity:.5; mix-blend-mode: screen; pointer-events:none; animation: hud-pulse 8s ease-in-out infinite;
}
-@keyframes holo-sweep{ 0%{ left:-25% } 100%{ left:100% } }
+@keyframes hud-pulse{ 0%,100%{ opacity:.5; transform:scale(1) } 50%{ opacity:.65; transform:scale(1.02) } }
/* Loader — hologram aktiválás */
#loader{ background: radial-gradient(60% 80% at 50% 50%, rgba(6,12,20,.9), rgba(6,12,20,.6)); backdrop-filter: blur(6px) }