Show blurred spacer.png overlay on members/wiki sections when not logged in

- Instead of hiding main-content, members and wiki sections stay visible
- Each section has a .section-locked overlay with spacer.png blurred 16px
- Semi-transparent white layer + frosted-glass CTA card on top
- CTA says 'Login via Telegram' with the same bot deep-link as Anmelden
- checkSession() now toggles overlay visibility instead of hiding the whole main
This commit is contained in:
Kato
2026-09-05 19:31:37 +00:00
parent f6eb226918
commit c4874d53e9
3 changed files with 124 additions and 1 deletions
+73
View File
@@ -813,6 +813,7 @@ body[data-lang="en"] .hide-de { display: none !important; }
max-width: 1200px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.section:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
@@ -1501,6 +1502,78 @@ TELEGRAM BANNER
.calendar-event-headline a:hover { text-decoration: underline; }
.calendar-event-time { color: #65676b; white-space: nowrap; }
/* ========================================
SECTION LOCKED OVERLAY — blurred preview for non-logged-in users
======================================== */
.section-locked {
position: absolute;
inset: 0;
z-index: 10;
border-radius: 12px;
overflow: hidden;
display: block;
}
.locked-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(16px);
-webkit-filter: blur(16px);
transform: scale(1.1);
}
.locked-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.locked-cta {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.locked-cta-content {
text-align: center;
max-width: 480px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 32px 28px;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
border: 1px solid rgba(255,255,255,0.5);
}
.locked-icon { font-size: 2.8rem; margin-bottom: 12px; }
.locked-title {
font-size: 1.3rem;
font-weight: 700;
color: #1c1e21;
margin: 0 0 10px;
}
.locked-desc {
font-size: 0.95rem;
color: #57606a;
line-height: 1.55;
margin: 0 0 20px;
}
.locked-hint {
font-size: 0.82rem;
color: #999;
margin: 14px 0 0;
font-style: italic;
}
.locked-login-btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
}
/* ========================================
FOOTER
======================================== */