From c4874d53e96b3f49d4fbd1f91273d8420494a0d0 Mon Sep 17 00:00:00 2001 From: Kato Date: Sat, 5 Sep 2026 19:31:37 +0000 Subject: [PATCH] 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 --- css/styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 46 +++++++++++++++++++++++++++++++ js/main.js | 6 ++++- 3 files changed, 124 insertions(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index a5fb5b1..9578e71 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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 ======================================== */ diff --git a/index.html b/index.html index 800f2b5..11297d7 100644 --- a/index.html +++ b/index.html @@ -358,6 +358,31 @@
+
+ +
+
+
+
🔒
+

+ Exklusiver Mitgliederbereich + Exclusive Members Area +

+

+ Melde dich über Telegram an, um Zugriff auf unsere Mitgliederliste, das Wiki und alle Inhalte zu erhalten. + Sign in via Telegram to get access to our member directory, wiki, and everything else. +

+ +

+ Nach der Anmeldung erhältst du in Telegram einen Link, der dich hier freischaltet. + After signing in you will receive a link in Telegram that unlocks this page. +

+
+
+

Mitglieder @@ -378,6 +403,27 @@
+
+ +
+
+
+
🔒
+

+ Exklusiver Wiki-Bereich + Exclusive Wiki Area +

+

+ Melde dich über Telegram an, um auf unser Wiki mit allen Erfahrungen zu Steuern, Banken und Rechtlichem zuzugreifen. + Sign in via Telegram to access our wiki with all experiences on taxes, banking and legal matters. +

+ +
+
+

Wiki diff --git a/js/main.js b/js/main.js index 5b43f6c..f4efe45 100644 --- a/js/main.js +++ b/js/main.js @@ -347,6 +347,8 @@ function checkSession() { document.getElementById('telegram-banner').style.display = 'none'; document.getElementById('main-content').style.display = 'block'; document.getElementById('newsletter-section').style.display = 'block'; + // Remove locked overlays + document.querySelectorAll('.section-locked').forEach(el => el.style.display = 'none'); loadUsers(); loadWiki(); loadDates(); @@ -356,8 +358,10 @@ function checkSession() { document.getElementById('logout-btn').style.display = 'none'; document.getElementById('profile-btn').style.display = 'none'; document.getElementById('telegram-banner').style.display = 'block'; - document.getElementById('main-content').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; document.getElementById('newsletter-section').style.display = 'none'; + // Show locked overlays + document.querySelectorAll('.section-locked').forEach(el => el.style.display = ''); } }