rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Dots→Zähler, Anmelden-Button Kontrast, Trust-Strip einzeilig — SW by-v448, APP_VER 427

Browse source
This commit is contained in:
rene 2026-04-27 19:14:30 +02:00
parent d9572e2796
commit 3b9f69fa0b
3 changed files with 26 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '426'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '427'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

51
backend/static/js/pages/welcome.js
View file

@ -97,9 +97,7 @@ window.Page_welcome = (() => {
<img src="/icons/icon-180.png" alt="Ban Yaro" class="wc-lhero-icon">
<h1 class="wc-lhero-headline" id="wc-hero-headline">${HERO_SLIDES[0].headline}</h1>
<p class="wc-lhero-sub" id="wc-hero-sub">${HERO_SLIDES[0].sub}</p>
<div class="wc-hero-dots" id="wc-hero-dots">
${HERO_SLIDES.map((_, i) => `<span class="wc-hero-dot${i === 0 ? ' wc-hero-dot--active' : ''}"></span>`).join('')}
</div>
<span class="wc-hero-counter" id="wc-hero-counter">1 / ${HERO_SLIDES.length}</span>
<div class="wc-lhero-cta">
${hasPrompt ? `
@ -113,7 +111,7 @@ window.Page_welcome = (() => {
Kostenlos loslegen
</button>
`}
<button class="btn btn-ghost wc-btn-login" id="welcome-login-btn">
<button class="btn wc-btn-login" id="welcome-login-btn">
Schon dabei? Anmelden
</button>
</div>
@ -342,18 +340,11 @@ window.Page_welcome = (() => {
position: relative;
transition: opacity 0.4s ease;
}
.wc-hero-dots {
display: flex; justify-content: center; gap: 6px;
margin-bottom: var(--space-6); position: relative;
}
.wc-hero-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.35);
transition: background 0.3s, transform 0.3s;
}
.wc-hero-dot--active {
background: rgba(255,255,255,0.9);
transform: scale(1.3);
.wc-hero-counter {
display: block; text-align: center;
font-size: var(--text-xs); color: rgba(255,255,255,0.55);
font-weight: var(--weight-semibold); letter-spacing: 0.08em;
margin-bottom: var(--space-5); position: relative;
}
.wc-lhero-cta {
display: flex; flex-direction: column;
@ -372,22 +363,28 @@ window.Page_welcome = (() => {
}
.wc-btn-hero:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.wc-btn-login {
color: rgba(255,255,255,0.9) !important;
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
border-color: rgba(255,255,255,0.35) !important;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: var(--text-sm); font-weight: var(--weight-semibold);
padding: 12px var(--space-6); border-radius: 100px;
border: 1.5px solid rgba(255,255,255,0.65);
width: 100%; max-width: 320px;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.wc-btn-login:hover { background: rgba(255,255,255,0.22); }
.wc-btn-login:active { background: rgba(255,255,255,0.28); }
.wc-trust-strip {
display: flex; justify-content: center;
gap: var(--space-4); flex-wrap: wrap;
gap: var(--space-3); flex-wrap: nowrap;
position: relative;
}
.wc-trust-strip span {
display: flex; align-items: center; gap: 5px;
font-size: var(--text-xs); color: rgba(255,255,255,0.8);
font-weight: var(--weight-semibold);
display: flex; align-items: center; gap: 4px;
font-size: 0.7rem; color: rgba(255,255,255,0.8);
font-weight: var(--weight-semibold); white-space: nowrap;
}
.wc-trust-strip .ph-icon { width: 13px; height: 13px; }
.wc-trust-strip .ph-icon { width: 12px; height: 12px; flex-shrink: 0; }
/* Feature Cards */
.wc-feature {
@ -572,7 +569,7 @@ window.Page_welcome = (() => {
let idx = 0;
const headline = _container.querySelector('#wc-hero-headline');
const sub = _container.querySelector('#wc-hero-sub');
const dots = _container.querySelectorAll('.wc-hero-dot');
const counter = _container.querySelector('#wc-hero-counter');
if (!headline || !sub) return;
_heroInterval = setInterval(() => {
@ -585,7 +582,7 @@ window.Page_welcome = (() => {
sub.textContent = HERO_SLIDES[idx].sub;
headline.style.opacity = '1';
sub.style.opacity = '1';
dots.forEach((d, i) => d.classList.toggle('wc-hero-dot--active', i === idx));
if (counter) counter.textContent = `${idx + 1} / ${HERO_SLIDES.length}`;
}, 400);
}, 6000);
}

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v447';
const CACHE_VERSION = 'by-v448';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten