Heise News Ticker und Abstand meets auf der Welcome Seite

2026-05-11 15:45:15 +02:00
parent d131948c13
commit 4733c11832
4 changed files with 137 additions and 4 deletions
--- a/static/heise.html
+++ b/static/heise.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Heise News Ticker</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #F4F6F8;
+      color: #212121;
+      margin: 0;
+      padding: 1em;
+    }
+    h1 {
+      font-size: 1.2em;
+      margin-bottom: .7em;
+      color: #DA002D;
+    }
+    ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      margin-bottom: 1em;
+      background: #fff;
+      border-left: 6px solid #DA002D;
+      padding: 0.8em 0.7em 0.8em 1em;
+      font-size: 1.05em;
+      border-radius: 4px;
+      box-shadow: 0 2px 6px rgba(218, 0, 45, 0.03);
+      transition: box-shadow 0.2s;
+    }
+    li:hover {
+      box-shadow: 0 4px 18px rgba(218,0,45,0.08), 0 1.5px 4px #DA002D22;
+    }
+    a {
+      color: #DA002D;
+      text-decoration: none;
+      font-weight: 600;
+    }
+    a:hover {
+      text-decoration: underline;
+      color: #B00024;
+    }
+    .time {
+      display: block;
+      color: #6c757d;
+      font-size: 0.95em;
+      font-weight: 400;
+      margin-top: 0.15em;
+    }
+  </style>
+</head>
+<body>
+  <h1>Heise TOP IT-News</h1>
+  <ul id="news-list"></ul>
+  <script>
+    const FEED_URL = 'https://www.heise.de/rss/heise-atom.xml';
+
+    async function loadNews() {
+      try {
+        const response = await fetch(FEED_URL);
+        const text = await response.text();
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(text, 'application/xml');
+
+        // Atom Feed uses <entry>, not <item>
+        const items = Array.from(xml.getElementsByTagName('entry')).slice(0, 6);
+        const list = document.getElementById('news-list');
+        if (items.length === 0) {
+          list.innerHTML = '<li>Momentan keine News gefunden.</li>';
+          return;
+        }
+        items.forEach(item => {
+          const title = item.querySelector('title')?.textContent || 'Unbenannt';
+          const link = item.querySelector('link')?.getAttribute('href') || '#';
+           const pubDateRaw = item.querySelector('updated')?.textContent || '';
+           const summaryRaw = item.querySelector('summary')?.textContent || '';
+
+           let formattedDate = '';
+           if (pubDateRaw) {
+             const d = new Date(pubDateRaw);
+             // Format zu TT-MM-JJJJ hh:mm
+             const pad = n => (n<10 ? '0'+n : n);
+             formattedDate = `${pad(d.getDate())}.${pad(d.getMonth()+1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+           }
+
+           const li = document.createElement('li');
+           li.innerHTML = `
+            <span class="time">${formattedDate}</span>
+            <a href="${link}" target="_blank">${title}</a>
+            <div class="summary" style="color:#555;font-size:1em;line-height:1.5;margin-top:0.35em;font-weight:400;">
+              ${summaryRaw}
+            </div>
+          `;
+           list.appendChild(li);
+        });
+      } catch (err) {
+        document.getElementById('news-list').innerHTML = '<li>Fehler beim Laden des Feeds!</li>';
+      }
+    }
+    loadNews();
+  </script>
+</body>
+</html>