Conflicten radar

Voorbeeld 1:
Zie onderstaande
  <!-- Sidebar Widget Start -->
  <div class="sidebar-news-widget">
    <div class="widget-header">
    <!--  <span class="live-dot"></span> -->
      <h3 class="widget-title">🚀 Conflicten radar</h3>
    </div>
    
    <div class="vertical-ticker-window">
      <div class="vertical-ticker-track" id="verticalTrack">
        <div class="sidebar-news-item">
          <p class="item-title">Nieuwste berichten laden…</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Sidebar Widget Einde -->

  <script>
    // Uitgebreide lijst met RSS-feeds van alternatieve en onafhankelijke bronnen
    const feeds = [
      { name: 'WorldUnity', url: 'https://worldunity.me/feed/' },
      { name: 'De Andere Krant', url: 'https://deanderekrant.nl/feed/' },
      { name: 'Indepen', url: 'https://indepen.nl/feed/' },
      { name: 'Front Nieuws', url: 'https://www.frontnieuws.com/feed/' },
      { name: 'NieuwRechts', url: 'https://nieuwrechts.nl/feed' },
      { name: 'DDS', url: 'https://www.dagelijksestandaard.nl/feed' },
      { name: 'ON!', url: 'https://ongehoordnederland.nl/feed/' },
      { name: 'Cultuur onder Vuur', url: 'https://cultuurondervuur.nl/feed' },
      { name: 'React Nieuws', url: 'https://reactnieuws.net/feed/' },
      { name: 'GeenStijl', url: 'https://www.geenstijl.nl/rss' }
    ];

    // Trefwoorden waarop optioneel wordt gefilterd
    const keywords = ['oorlog', 'conflict', 'asiel', 'migratie', 'azc', 'politiek', 'crisis', 'grens', 'oekraïne', 'navo', 'vuurwek', 'aanval', 'steek', 'overheid', 'boeren'];

    async function fetchFeed(feed) {
      try {
        const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feed.url)}`;
        const res = await fetch(apiUrl);
        const data = await res.json();
        
        if (data.status === 'ok') {
          return data.items.map(item => ({
            title: item.title,
            source: feed.name,
            // Converteer datum naar Timestamp voor een correcte chronologische sortering
            pubDate: new Date(item.pubDate).getTime()
          }));
        }
      } catch (err) {
        console.warn(`Feed ${feed.name} kon niet geladen worden:`, err);
      }
      return [];
    }

    async function initVerticalTicker() {
      // Alle feeds parallel ophalen
      const results = await Promise.all(feeds.map(fetchFeed));
      let allItems = results.flat();

      if (allItems.length > 0) {
        // 1. SORTEREN op datum: Nieuwste artikelen als eerste (descending order)
        allItems.sort((a, b) => b.pubDate - a.pubDate);

        // 2. Optionele filtering op trefwoorden
        const filteredItems = allItems.filter(item => 
          keywords.some(kw => item.title.toLowerCase().includes(kw))
        );

        // Gebruik de gefilterde lijst als er genoeg resultaten zijn, anders de nieuwste berichten uit alle feeds
        const itemsToDisplay = filteredItems.length >= 6 ? filteredItems : allItems.slice(0, 30);

        const track = document.getElementById('verticalTrack');
        
        const htmlContent = itemsToDisplay.map(item => {
          const cleanTitle = item.title.replace(/<[^>]*>/g, '');
          
          // Tijd omzetten naar leesbaar formaat (bijv. 14:30)
          const dateObj = new Date(item.pubDate);
          const timeString = isNaN(dateObj) ? '' : dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

          return `
            <div class="sidebar-news-item">
              <div class="item-meta">
                <span class="source-tag">${item.source}</span>
                ${timeString ? `<span class="time-tag">${timeString}</span>` : ''}
              </div>
              <p class="item-title">${cleanTitle}</p>
            </div>
          `;
        }).join('');

        // Verdubbel de inhoud voor een vloeiende, oneindige verticale loop
        track.innerHTML = htmlContent + htmlContent;
      } else {
        document.getElementById('verticalTrack').innerHTML = `
          <div class="sidebar-news-item">
            <p class="item-title">Kon geen recente artikelen laden.</p>
          </div>
        `;
      }
    }

    initVerticalTicker();
</script>
<style>
    /* Sidebar widget container */
    .sidebar-news-widget {
      width: 100%;
      max-width: 375px; /* Binnen een zijbalk-formaat */
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow: hidden;
    }

    /* Lichte header */
    .widget-header {
      background-color: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .widget-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      background-color: #ef4444;
      border-radius: 50%;
      display: inline-block;
      animation: pulse 1.5s infinite;
    }

    /* Verticale scroller venster */
    .vertical-ticker-window {
      height: 300px; /* Hoogte van het zichtbare deel */
      overflow: hidden;
      position: relative;
      background-color: #ffffff;
    }

    /* De bewegende lijst */
    .vertical-ticker-track {
      display: flex;
      flex-direction: column;
      will-change: transform;
      animation: scrollUp 45s linear infinite; /* Snelheid aangepast op meer items */
    }

    /* Pauzeer bij hover */
    .vertical-ticker-window:hover .vertical-ticker-track {
      animation-play-state: paused;
    }

    /* Losse nieuwsitems */
    .sidebar-news-item {
      padding: 12px 16px;
      border-bottom: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: background-color 0.2s ease;
    }

    .sidebar-news-item:hover {
      background-color: #f8fafc;
    }

    .item-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .source-tag {
      font-size: 10px;
      font-weight: 700;
      color: #2563eb;
color: #2d4782;
      background-color: #eff6ff;
      padding: 2px 8px;
      border-radius: 12px;
      text-transform: uppercase;
    }

    .time-tag {
      font-size: 10px;
      color: #94a3b8;
    }

    .item-title {
      font-size: 13px;
      line-height: 1.4;
      color: #334155;
      font-weight: 500;
      margin: 0;
    }

    /* Animaties */
    @keyframes scrollUp {
      0% { transform: translateY(0%); }
      100% { transform: translateY(-50%); }
    }

    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.3; }
      100% { opacity: 1; }
    }
  </style>
🚀 Conflicten radar

Geef een reactie Reactie annuleren
