From 8d470ba26b2d2788f3ad76da8558ca6abf11ca1c Mon Sep 17 00:00:00 2001 From: D4rkst3r Date: Thu, 30 Jul 2026 22:01:43 +0200 Subject: [PATCH] =?UTF-8?q?Frontend-Polish:=20Navbar,=20Roadmap,=20Galerie?= =?UTF-8?q?=20und=20Karten=20aufgeh=C3=BCbscht?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Navbar: animierter Gradient-Unterstrich (wächst von links, aktiver Tab mit Neon-Glow), Blur-Effekt + Glanzlinie beim Scrollen, Login-Button und User-Chip als Pills mit Avatar-Ring - Karten: Radius, Hover-Lift mit Schatten - Roadmap: Meilensteine mit Neon-Akzentleiste links, Fortschrittsbalken rund mit wanderndem Glanz, Prozent in Neon - Galerie: gestaffeltes Einblenden, Hover-Zoom mit Glow und aufschiebender Meta-Zeile - Community-Wünsche: Hover-States, Gruppen-Titel mit auslaufender Linie, Footer mit Glanzlinie - .claude/launch.json für lokale Frontend-Preview Co-Authored-By: Claude Fable 5 --- .claude/launch.json | 11 +++ frontend/src/style.css | 152 ++++++++++++++++++++++++++++++++--------- 2 files changed, 132 insertions(+), 31 deletions(-) create mode 100644 .claude/launch.json diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 0000000..d681838 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "frontend-preview", + "runtimeExecutable": "npx", + "runtimeArgs": ["vite", "preview", "frontend", "--port", "4173"], + "port": 4173 + } + ] +} diff --git a/frontend/src/style.css b/frontend/src/style.css index b625c14..7b0f3dc 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -91,13 +91,24 @@ body::after { padding: 1.25rem 2.5rem; background: linear-gradient(to bottom, rgba(10, 10, 10, .98), rgba(10, 10, 10, .75)); border-bottom: 1px solid transparent; - transition: padding .3s, border-color .3s, background .3s; + transition: padding .3s, border-color .3s, background .3s, backdrop-filter .3s; } .nav.scrolled { padding: .8rem 2.5rem; - background: rgba(10, 10, 10, .95); + background: rgba(10, 10, 10, .82); + backdrop-filter: blur(14px) saturate(1.2); + -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--border); } +/* Neon-Glanzlinie unter der Navbar, wird beim Scrollen sichtbar */ +.nav::after { + content: ''; + position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; + background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .5) 30%, rgba(255, 77, 0, .5) 70%, transparent); + opacity: 0; transition: opacity .3s; + pointer-events: none; +} +.nav.scrolled::after { opacity: 1; } .nav-logo { font-family: var(--display); font-size: 1.6rem; letter-spacing: .15em; color: var(--neon); @@ -107,16 +118,30 @@ body::after { .nav-logo:hover { text-shadow: 0 0 18px rgba(245, 197, 24, .55); } .nav-logo span { color: var(--neon2); } -.nav-links { display: flex; gap: 1.75rem; flex: 1; } +.nav-links { display: flex; gap: 1.6rem; flex: 1; } .nav-links a { + position: relative; font-family: var(--mono); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); padding: .3rem 0; - border-bottom: 1px solid transparent; - transition: color .2s, border-color .2s; + transition: color .2s, text-shadow .2s; +} +/* Animierter Gradient-Unterstrich: wächst von links */ +.nav-links a::after { + content: ''; + position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; + background: linear-gradient(90deg, var(--neon), var(--neon2)); + border-radius: 2px; + transform: scaleX(0); transform-origin: left; + transition: transform .25s ease; } .nav-links a:hover { color: var(--text); } -.nav-links a.active { color: var(--neon); border-bottom-color: var(--neon); } +.nav-links a:hover::after { transform: scaleX(.55); } +.nav-links a.active { + color: var(--neon); + text-shadow: 0 0 12px rgba(245, 197, 24, .35); +} +.nav-links a.active::after { transform: scaleX(1); } /* ── AUTH ──────────────────────────────────────────── */ .auth { display: flex; align-items: center; } @@ -126,18 +151,27 @@ body::after { letter-spacing: .25em; text-transform: uppercase; color: var(--neon); border: 1px solid var(--border); - padding: .5rem 1.1rem; - transition: background .2s, border-color .2s, color .2s; + border-radius: 999px; + padding: .5rem 1.2rem; + transition: background .2s, border-color .2s, color .2s, box-shadow .2s; +} +.btn-login:hover { + border-color: var(--neon); + background: rgba(245, 197, 24, .08); + box-shadow: 0 0 16px rgba(245, 197, 24, .15); } -.btn-login:hover { border-color: var(--neon); background: rgba(245, 197, 24, .08); } .discord-mark { width: 15px; height: 15px; } .user-chip { display: flex; align-items: center; gap: .6rem; border: 1px solid rgba(255, 255, 255, .1); - padding: .3rem .8rem .3rem .35rem; + border-radius: 999px; + padding: .3rem .9rem .3rem .35rem; + background: rgba(255, 255, 255, .03); + transition: border-color .2s; } -.avatar { width: 24px; height: 24px; border-radius: 50%; } +.user-chip:hover { border-color: var(--border); } +.avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 197, 24, .4); } .username { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted); } .logout { color: var(--muted2); font-size: .75rem; padding: 0 .1rem; transition: color .2s; } .logout:hover { color: var(--neon2); } @@ -257,10 +291,16 @@ body::after { position: relative; background: var(--bg2); border: 1px solid rgba(255, 255, 255, .06); + border-radius: 12px; padding: 1.3rem 1.6rem 1.2rem; - transition: border-color .25s, background .25s; + transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; +} +.card:hover { + border-color: var(--border); + background: var(--bg3); + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 197, 24, .06); } -.card:hover { border-color: var(--border); background: var(--bg3); } .timeline .card::before { /* Marker auf der Timeline */ content: ''; @@ -414,11 +454,14 @@ body::after { .wish-row { display: flex; align-items: baseline; gap: 1rem; - padding: .55rem .9rem; + padding: .6rem 1rem; background: var(--bg2); border: 1px solid rgba(255, 255, 255, .06); + border-radius: 10px; margin-bottom: .5rem; + transition: border-color .2s, background .2s; } +.wish-row:hover { border-color: var(--border); background: var(--bg3); } .wish-score { font-family: var(--mono); font-size: .78rem; color: var(--neon); white-space: nowrap; min-width: 3.5rem; @@ -430,61 +473,95 @@ body::after { .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: .75rem; + gap: .9rem; } .shot { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); + border-radius: 10px; aspect-ratio: 16 / 9; background: #000; - transition: border-color .2s; + transition: border-color .25s, transform .25s, box-shadow .25s; + animation: riseIn .5s ease both; +} +/* Gestaffeltes Einblenden der ersten Reihen */ +.shot:nth-child(2) { animation-delay: .05s; } +.shot:nth-child(3) { animation-delay: .1s; } +.shot:nth-child(4) { animation-delay: .15s; } +.shot:nth-child(5) { animation-delay: .2s; } +.shot:nth-child(6) { animation-delay: .25s; } +.shot:hover { + border-color: var(--neon); + transform: translateY(-3px); + box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(245, 197, 24, .12); } -.shot:hover { border-color: var(--neon); } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; - transition: transform .3s; + transition: transform .35s ease, filter .35s; + filter: brightness(.92); } -.shot:hover img { transform: scale(1.04); } +.shot:hover img { transform: scale(1.06); filter: brightness(1.05); } .shot-meta { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: baseline; - padding: .4rem .6rem; - background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); + padding: .55rem .7rem .45rem; + background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; - opacity: 0; transition: opacity .2s; + opacity: 0; transform: translateY(4px); + transition: opacity .25s, transform .25s; } -.shot:hover .shot-meta { opacity: 1; } +.shot:hover .shot-meta { opacity: 1; transform: translateY(0); } .shot-author { color: var(--neon); } .shot-date { color: var(--muted); } /* ── ROADMAP ───────────────────────────────────────── */ -.roadmap-group { margin-bottom: 2.25rem; } +.roadmap-group { margin-bottom: 2.75rem; } .roadmap-group .settings-title { margin-bottom: 1rem; } -.milestone { margin-bottom: 1.1rem; } +.milestone { + margin-bottom: 1.1rem; + border-left: 3px solid rgba(245, 197, 24, .25); +} +.milestone:hover { border-left-color: var(--neon); } .milestone-title { font-family: var(--display); - font-size: 1.3rem; letter-spacing: .04em; + font-size: 1.35rem; letter-spacing: .04em; color: var(--text); } .progress { - height: 6px; + position: relative; + height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); - margin-top: .8rem; + margin-top: .9rem; overflow: hidden; } .progress-bar { - height: 100%; + position: relative; + height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--neon2), var(--neon)); - box-shadow: 0 0 10px rgba(245, 197, 24, .4); + box-shadow: 0 0 12px rgba(245, 197, 24, .45); transition: width .6s ease; + overflow: hidden; +} +/* Wandernder Glanz auf dem Fortschrittsbalken */ +.progress-bar::after { + content: ''; + position: absolute; inset: 0; + background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); + transform: translateX(-100%); + animation: barShine 3.2s ease-in-out infinite; +} +@keyframes barShine { + 0%, 55% { transform: translateX(-100%); } + 85%, 100% { transform: translateX(100%); } } .progress-info { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--muted2); - margin-top: .35rem; + margin-top: .45rem; } +.progress-info span:first-child { color: var(--neon); } /* ── CHANGELOG ─────────────────────────────────────── */ .release-card { margin-bottom: 1.5rem; } @@ -661,11 +738,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); } margin-bottom: 1.5rem; } .settings-title { + display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--neon2); margin-bottom: 1.2rem; } +/* Auslaufende Linie hinter Gruppen-Titeln */ +.settings-title::after { + content: ''; + flex: 1; height: 1px; + background: linear-gradient(90deg, rgba(255, 77, 0, .35), transparent); +} .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; } .stat { display: flex; flex-direction: column; gap: .1rem; } @@ -812,12 +896,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); } /* ── FOOTER ────────────────────────────────────────── */ .footer { + position: relative; border-top: 1px solid var(--border); padding: 1.5rem 2.5rem; display: flex; align-items: center; justify-content: center; gap: .9rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--muted2); } +.footer::before { + content: ''; + position: absolute; left: 0; right: 0; top: -1px; height: 1px; + background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .4), transparent); +} .footer-logo { font-family: var(--display); font-size: .95rem; letter-spacing: .15em; color: var(--neon); } .footer-logo span { color: var(--neon2); } .footer-sep { color: var(--muted2); }