WEBklar/emmas-schatzkiste
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neuigkeiten: News-Pinnwand auf der Startseite

Browse Source 
Sektion 'Neues aus dem Laden' nach dem Hero. Die Beitraege schreibt Opa Martin
im WEBklar-Kundenportal (Funktion News); news.js von project.webklar.com zeigt
sie als Korkwand. Ohne Beitraege bleibt der statische Leerzustand stehen.
Menuepunkt 'Neuigkeiten' (am Handy ausgeblendet, 4 Punkte passen),
Datenschutz Abschnitt 4c, Stand 30.09.2026.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
knsoandClaude Opus 5.5 committed 2026-09-30 18:02:14 +00:00
1 parent 116b8b741e
commit 3ae1084df8
6 files changed
+81 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+38
View File
@@ -230,6 +230,8 @@ a:hover{color:var(--sky-600)}
.hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
.hdr__brand img{width:32px; height:32px}
.nav{flex-wrap:nowrap; gap:0}
/* Die Kopfzeile traegt am Handy vier Punkte; "Neuigkeiten" steht dort direkt unter dem Hero */
.nav a.nav__news{display:none}
.nav a{
position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
@@ -776,3 +778,39 @@ a:hover{color:var(--sky-600)}
@media (max-width:639.98px){
.ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
}
/* ============================================================ NEUIGKEITEN (News-Pinnwand)
Die Zettel rendert news.js (WEBklar-Portal, Funktion "News") in Kork mit Holzrahmen #A8733F,
Schriften der Seite ueber die --wkn-Variablen. .news-board ist nur der statische Leerzustand im
selben Look; news.js ersetzt ihn, sobald ein Beitrag haengt. */
.news-lead{max-width:52ch; margin:calc(var(--space-2) * -1) 0 var(--space-6) 58px; color:var(--ink-500)}
.news-pinnwand{
--wkn-font-display:'Fredoka', 'Trebuchet MS', sans-serif;
--wkn-font-body:'Nunito', 'Segoe UI', sans-serif;
}
.news-board{
position:relative; border-radius:var(--radius-xl); border:12px solid #A8733F;
padding:var(--space-12) var(--space-6); display:grid; place-items:center;
background-color:#C08A52;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
box-shadow:inset 0 6px 14px rgba(60,32,10,.35), var(--shadow-band);
}
.news-empty{
position:relative; max-width:34ch; text-align:center; background:#fff; border-radius:8px;
padding:var(--space-8) var(--space-6) var(--space-6); transform:rotate(-1.5deg);
box-shadow:0 10px 22px rgba(35,52,74,.18);
}
.news-empty::before{
content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px;
transform:translateX(-50%) rotate(3deg); background:rgba(255,255,255,.7);
box-shadow:0 1px 2px rgba(35,52,74,.12);
}
.news-empty__pin svg{width:34px; height:34px; color:var(--sun-700)}
.news-empty h3{font:var(--t-h2); color:var(--ink-700); margin:var(--space-2) 0}
.news-empty p{color:var(--ink-500); margin:0}
@media (max-width:700px){
.news-lead{margin-left:0}
.news-board{border-width:8px; padding:var(--space-10) var(--space-4); border-radius:var(--radius-l)}
}
datenschutz.html
+19 -2
View File
@@ -24,6 +24,7 @@
</a>
<nav class="nav" aria-label="Hauptnavigation">
<a href="index.html">Start</a>
<a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
<a href="shop.html">Shop</a>
<a href="hilfe-verein.html">Hilfe Verein</a>
<a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -41,6 +42,8 @@
Es gibt kein Kontaktformular. Schriften werden vom eigenen Server geladen, nicht von
Google. Auf der Startseite ist eine Karte von Google Maps eingebunden. Beim Aufruf
der Startseite wird dafür eine Verbindung zu Google hergestellt (siehe Abschnitt 4a).
Die Neuigkeiten auf der Startseite lädt Ihr Browser vom Server meines Webdienstleisters
WEBklar (siehe Abschnitt 4c).
</div>
<div class="prose__warn">
@@ -111,6 +114,19 @@
die Datenschutzbestimmungen des jeweiligen Anbieters, auf dessen Verarbeitung wir
keinen Einfluss haben.</p>
<h2 id="neuigkeiten">4c. Neuigkeiten auf dieser Website</h2>
<p>Auf der Startseite zeige ich unter „Neues aus dem Laden“ kurze Beiträge mit Text und
Fotos. Beim Aufruf der Seite lädt Ihr Browser diese Beiträge und Bilder von dem Server,
den die WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler, in meinem Auftrag betreibt und
der bei der Hetzner Online GmbH in Falkenstein (Deutschland) steht. Dabei werden Ihre
IP-Adresse, Datum und Uhrzeit des Aufrufs sowie Angaben zu Ihrem Browser und
Betriebssystem übertragen und kurzzeitig in Server-Protokollen gespeichert. Die
Pinnwand setzt <strong>keine Cookies</strong> und speichert nichts in Ihrem Browser.</p>
<p>Ich brauche diese Daten, um die Beiträge auszuliefern und den Betrieb sicher zu
halten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Mein berechtigtes Interesse
liegt in der Darstellung aktueller Informationen und im sicheren, funktionsfähigen
Betrieb der Website. Die Protokolle werden nach 14 Tagen gelöscht.</p>
<h2>5. Schriftarten</h2>
<p>Die Schriften Fredoka und Nunito werden <strong>lokal vom eigenen Server</strong>
ausgeliefert. Beim Aufruf dieser Seite wird keine Verbindung zu Google Fonts oder zu
@@ -132,7 +148,8 @@
und dem Server ist damit verschlüsselt.</p>
<h2>8. Empfänger und Drittlandübermittlung</h2>
<p>Über den Hoster hinaus gebe ich keine personenbezogenen Daten weiter. Eine
<p>Über den Hoster und meinen Webdienstleister WEBklar (Abschnitt 4c) hinaus gebe ich
keine personenbezogenen Daten weiter. Eine
Übermittlung in Länder außerhalb der EU beziehungsweise des EWR findet durch mich nicht
statt. Ausnahme ist die Karte von Google Maps auf der Startseite (Abschnitt 4a).</p>
@@ -154,7 +171,7 @@
Bayerische Landesamt für Datenschutzaufsicht (BayLDA), Promenade 18, 91522 Ansbach.</p>
<h2>11. Stand</h2>
<p>Diese Erklärung beschreibt den Stand vom 25. September 2026.</p>
<p>Diese Erklärung beschreibt den Stand vom 30. September 2026.</p>
</div>
</section>
</main>
hilfe-verein.html
+1
View File
@@ -23,6 +23,7 @@
</a>
<nav class="nav" aria-label="Hauptnavigation">
<a href="index.html">Start</a>
<a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
<a href="shop.html">Shop</a>
<a href="hilfe-verein.html" aria-current="page">Hilfe Verein</a>
<a href="#kontakt">Kontakt</a>
impressum.html
+1
View File
@@ -24,6 +24,7 @@
</a>
<nav class="nav" aria-label="Hauptnavigation">
<a href="index.html">Start</a>
<a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
<a href="shop.html">Shop</a>
<a href="hilfe-verein.html">Hilfe Verein</a>
<a href="hilfe-verein.html#kontakt">Kontakt</a>
index.html
+21
View File
@@ -23,6 +23,7 @@
</a>
<nav class="nav" aria-label="Hauptnavigation">
<a href="index.html" aria-current="page">Start</a>
<a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
<a href="shop.html">Shop</a>
<a href="hilfe-verein.html">Hilfe Verein</a>
<a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -64,6 +65,25 @@
</div>
</section>
<!-- News-Pinnwand (WEBklar Kundenportal, Funktion "News"). Beitraege schreibt Opa Martin im Portal;
news.js ersetzt den Leerzustand, sobald mindestens ein Beitrag haengt. -->
<section class="wrap section" id="neuigkeiten">
<div class="sh">
<span class="sh__chip" style="--chip-bg:var(--coral-600)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
<h2>Neues aus dem Laden</h2>
</div>
<p class="news-lead">Was gerade reingekommen ist, wann ich zu habe und was sonst so los ist. Frisch von mir an die Pinnwand gehängt.</p>
<div class="news-pinnwand" data-webklar-news="q74ehq7hvnpiymqy" data-api="https://project.webklar.com" data-signature="Opa Martin">
<div class="news-board">
<div class="news-empty">
<span class="news-empty__pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
<h3>Hier hängt bald was Neues.</h3>
<p>Neue Ware, Aktionen und Öffnungszeiten findest du ab jetzt an dieser Pinnwand. Schau bald wieder vorbei.</p>
</div>
</div>
</div>
</section>
<section class="wrap section" id="ueber-mich">
<div class="sh">
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
@@ -213,5 +233,6 @@
</footer>
<script src="assets/player.js" defer></script>
<script src="https://project.webklar.com/embed/news.js" defer></script>
</body>
</html>
shop.html
+1
View File
@@ -24,6 +24,7 @@
</a>
<nav class="nav" aria-label="Hauptnavigation">
<a href="index.html">Start</a>
<a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
<a href="shop.html" aria-current="page">Shop</a>
<a href="hilfe-verein.html">Hilfe Verein</a>
<a href="hilfe-verein.html#kontakt">Kontakt</a>