Skip to content

Fix download card layout and enhance sci-fi theme UI effects #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 2 commits into from
Closed

Fix download card layout and enhance sci-fi theme UI effects #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efb7b32
Initial plan
Copilot Oct 21, 2025
6ccbfe0
Fix download card layout and enhance theme-specific UI
Copilot Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/scifi-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,24 +74,24 @@ <h1 data-glitch="Formázás a jövőből">Formázás a jövőből</h1>
<!-- Közvetlen letöltések: FormatX Light (hutoczky/formatui v1.0.4) -->
<section id="downloads" class="downloads" aria-label="Közvetlen letöltések">
<h2>Letöltések</h2>
<div class="download-list">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/FormatX_Installer_v1015.exe" download rel="noopener" target="_blank">
<div class="download-list" role="list">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/FormatX_Installer_v1015.exe" download rel="noopener" target="_blank" role="listitem" aria-label="FormatX Light telepítő letöltése" title="FormatX Light telepítő (v1.0.4)">
FormatX Light telepítő (v1.0.4)
<small>Windows .exe • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/README.txt" rel="noopener" target="_blank">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/README.txt" rel="noopener" target="_blank" role="listitem" aria-label="README szövegfájl letöltése" title="README.txt">
README.txt
<small>Kiindulási információk • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/LICENSE.txt" rel="noopener" target="_blank">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/LICENSE.txt" rel="noopener" target="_blank" role="listitem" aria-label="Licenc szövegfájl letöltése" title="LICENSE.txt">
LICENSE.txt
<small>Licencfeltételek • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/WindowsAppRuntimeInstall-x64.exe" rel="noopener" target="_blank">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/WindowsAppRuntimeInstall-x64.exe" rel="noopener" target="_blank" role="listitem" aria-label="Windows App Runtime telepítő letöltése" title="Windows App Runtime (x64)">
Windows App Runtime (x64)
<small>Microsoft telepítő • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/windowsdesktop-runtime-10.0.0-rc.1.25451.107-win-x64.exe" rel="noopener" target="_blank">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/windowsdesktop-runtime-10.0.0-rc.1.25451.107-win-x64.exe" rel="noopener" target="_blank" role="listitem" aria-label=".NET Desktop Runtime 10.0 telepítő letöltése" title=".NET Desktop Runtime 10.0 (x64)">
.NET Desktop Runtime 10.0 (x64)
<small>Microsoft telepítő • hutoczky/formatui v1.0.4</small>
</a>
Expand Down
37 changes: 31 additions & 6 deletions docs/scifi-ui/styles/cyberpunk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand All @@ -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 } }

Expand Down
26 changes: 22 additions & 4 deletions docs/scifi-ui/styles/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,41 @@ 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);
animation: rail-flow 5.5s ease-in-out infinite;
}
.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:
Expand Down
42 changes: 30 additions & 12 deletions docs/scifi-ui/styles/starwars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,55 @@
*{ 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),
repeating-linear-gradient(180deg, rgba(96,229,255,.05) 0 6px, transparent 6px 22px);
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) }
Expand Down