<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Nieuws Mindmap</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #ffffff;
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 280px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
overflow-y: auto;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
}
.sidebar h2 {
color: #00ffff;
margin-bottom: 20px;
font-size: 1.2em;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.filter-group {
margin-bottom: 15px;
}
.filter-item {
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 5px;
border-radius: 5px;
transition: background 0.3s ease;
}
.filter-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.filter-item input[type="checkbox"] {
margin-right: 10px;
accent-color: #00ffff;
}
.filter-item label {
font-size: 0.9em;
cursor: pointer;
color: #e0e0e0;
}
.mindmap-container {
flex: 1;
position: relative;
overflow: hidden;
}
#mindmap {
width: 100%;
height: 100%;
}
.node {
position: absolute;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
text-align: center;
padding: 5px;
border: 2px solid;
backdrop-filter: blur(10px);
}
.node:hover {
transform: scale(1.2);
z-index: 10;
}
.node.new {
animation: pulse 2s infinite;
}
.node.tools { background: rgba(255, 100, 100, 0.3); border-color: #ff6464; }
.node.general { background: rgba(100, 255, 100, 0.3); border-color: #64ff64; }
.node.embodied { background: rgba(100, 100, 255, 0.3); border-color: #6464ff; }
.node.education { background: rgba(255, 255, 100, 0.3); border-color: #ffff64; }
.node.healthcare { background: rgba(255, 150, 255, 0.3); border-color: #ff96ff; }
.node.robotics { background: rgba(150, 255, 150, 0.3); border-color: #96ff96; }
.node.nlp { background: rgba(255, 200, 100, 0.3); border-color: #ffc864; }
.node.vision { background: rgba(200, 150, 255, 0.3); border-color: #c896ff; }
.node.ethics { background: rgba(255, 150, 150, 0.3); border-color: #ff9696; }
.node.business { background: rgba(150, 200, 255, 0.3); border-color: #96c8ff; }
.node.research { background: rgba(200, 255, 150, 0.3); border-color: #c8ff96; }
.node.gaming { background: rgba(255, 180, 200, 0.3); border-color: #ffb4c8; }
.node.automotive { background: rgba(180, 255, 200, 0.3); border-color: #b4ffc8; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
70% { box-shadow: 0 0 0 20px rgba(0, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}
.connection {
position: absolute;
height: 2px;
background: linear-gradient(90deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.1));
transform-origin: left center;
pointer-events: none;
}
.info-panel {
position: absolute;
top: 20px;
right: 20px;
width: 300px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(20px);
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(0, 255, 255, 0.3);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 100;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.info-panel.visible {
transform: translateX(0);
}
.info-panel h3 {
color: #00ffff;
margin-bottom: 10px;
font-size: 1.1em;
}
.info-panel .category {
color: #888;
font-size: 0.8em;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.info-panel p {
line-height: 1.4;
color: #e0e0e0;
font-size: 0.9em;
}
.legend {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.refresh-controls {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 15px;
border: 1px solid rgba(0, 255, 255, 0.3);
display: flex;
flex-direction: column;
gap: 10px;
min-width: 200px;
}
.refresh-button {
background: linear-gradient(45deg, #00ffff, #0080ff);
border: none;
color: white;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.refresh-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
}
.refresh-button:active {
transform: translateY(0);
}
.refresh-button.loading {
opacity: 0.7;
cursor: not-allowed;
}
.refresh-icon {
width: 16px;
height: 16px;
transition: transform 0.5s ease;
}
.refresh-icon.spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.auto-refresh-info {
font-size: 0.8em;
color: #888;
text-align: center;
}
.next-update {
color: #00ffff;
font-weight: bold;
}
.new-node-notification {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 255, 255, 0.9);
color: #000;
padding: 15px 25px;
border-radius: 10px;
font-weight: bold;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.new-node-notification.show {
opacity: 1;
}
.legend h4 {
color: #00ffff;
margin-bottom: 10px;
font-size: 0.9em;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
font-size: 0.8em;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2>AI Nieuws Filters</h2>
<div class="filter-group">
<div class="filter-item">
<input type="checkbox" id="all" checked>
<label for="all">Alles</label>
</div>
</div>
<div class="filter-group">
<div class="filter-item">
<input type="checkbox" id="tools" class="category-filter" data-category="tools" checked>
<label for="tools">Tools & Platforms</label>
</div>
<div class="filter-item">
<input type="checkbox" id="general" class="category-filter" data-category="general" checked>
<label for="general">Algemeen AI</label>
</div>
<div class="filter-item">
<input type="checkbox" id="embodied" class="category-filter" data-category="embodied" checked>
<label for="embodied">Embodied AI</label>
</div>
<div class="filter-item">
<input type="checkbox" id="education" class="category-filter" data-category="education" checked>
<label for="education">Onderwijs</label>
</div>
<div class="filter-item">
<input type="checkbox" id="healthcare" class="category-filter" data-category="healthcare" checked>
<label for="healthcare">Gezondheidszorg</label>
</div>
<div class="filter-item">
<input type="checkbox" id="robotics" class="category-filter" data-category="robotics" checked>
<label for="robotics">Robotica</label>
</div>
<div class="filter-item">
<input type="checkbox" id="nlp" class="category-filter" data-category="nlp" checked>
<label for="nlp">Taalmodellen</label>
</div>
<div class="filter-item">
<input type="checkbox" id="vision" class="category-filter" data-category="vision" checked>
<label for="vision">Computer Vision</label>
</div>
<div class="filter-item">
<input type="checkbox" id="ethics" class="category-filter" data-category="ethics" checked>
<label for="ethics">AI Ethiek</label>
</div>
<div class="filter-item">
<input type="checkbox" id="business" class="category-filter" data-category="business" checked>
<label for="business">Business AI</label>
</div>
<div class="filter-item">
<input type="checkbox" id="research" class="category-filter" data-category="research" checked>
<label for="research">Onderzoek</label>
</div>
<div class="filter-item">
<input type="checkbox" id="gaming" class="category-filter" data-category="gaming" checked>
<label for="gaming">Gaming AI</label>
</div>
<div class="filter-item">
<input type="checkbox" id="automotive" class="category-filter" data-category="automotive" checked>
<label for="automotive">Autonome Voertuigen</label>
</div>
</div>
</div>
<div class="mindmap-container">
<div id="mindmap"></div>
<div class="refresh-controls">
<button class="refresh-button" id="refreshButton">
<svg class="refresh-icon" id="refreshIcon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
</svg>
Ververs Nieuws
</button>
<div class="auto-refresh-info">
Auto-update over: <span class="next-update" id="countdown">5:00</span>
</div>
</div>
<div class="info-panel" id="infoPanel">
<div class="category" id="infoCategory"></div>
<h3 id="infoTitle"></h3>
<p id="infoSummary"></p>
</div>
<div class="legend">
<h4>Legende</h4>
<div class="legend-item">
<div class="legend-color" style="background: rgba(0, 255, 255, 0.5); animation: pulse 2s infinite;"></div>
<span>Nieuwe berichten</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: rgba(255, 255, 255, 0.3);"></div>
<span>Oudere berichten</span>
</div>
</div>
<div class="new-node-notification" id="newNodeNotification">
🆕 Nieuwe AI-berichten toegevoegd!
</div>
</div>
</div>
<script>
const newsItems = [
{
id: 1,
title: "OpenAI GPT-5 gelanceerd",
category: "nlp",
summary: "OpenAI heeft GPT-5 aangekondigd met verbeterde redeneervaardigheden en multimodale capaciteiten. Het model toont significante vooruitgang in complexe probleemoplossing.",
isNew: true,
age: 1
},
{
id: 2,
title: "Google's Bard krijgt robotica-integratie",
category: "robotics",
summary: "Google integreert Bard AI met robotische systemen, waardoor robots natuurlijke taal kunnen begrijpen en complexe taken kunnen uitvoeren in huishoudelijke omgevingen.",
isNew: true,
age: 2
},
{
id: 3,
title: "Microsoft Copilot in onderwijs",
category: "education",
summary: "Microsoft lanceert specifieke Copilot-tools voor onderwijsinstellingen, met focus op gepersonaliseerd leren en automatische beoordeling van studenten.",
isNew: false,
age: 15
},
{
id: 4,
title: "Tesla's FSD Beta 12 uitgebracht",
category: "automotive",
summary: "Tesla's nieuwste Full Self-Driving beta gebruikt end-to-end neural networks en toont dramatische verbeteringen in complexe verkeerssituaties.",
isNew: true,
age: 3
},
{
id: 5,
title: "Meta's Code Llama 2 open source",
category: "tools",
summary: "Meta heeft Code Llama 2 uitgebracht, een krachtige open-source coding assistant die concurreert met GitHub Copilot en andere commerciële alternatieven.",
isNew: false,
age: 8
},
{
id: 6,
title: "DeepMind's AlphaFold 3 onthuld",
category: "healthcare",
summary: "DeepMind presenteert AlphaFold 3 met verbeterde nauwkeurigheid voor eiwitstructuurvoorspelling en nieuwe mogelijkheden voor drug discovery.",
isNew: true,
age: 1
},
{
id: 7,
title: "Anthropic's Constitutional AI update",
category: "ethics",
summary: "Anthropic heeft een grote update uitgebracht voor Constitutional AI, met verbeterde veiligheidsprotocollen en betere alignment met menselijke waarden.",
isNew: false,
age: 12
},
{
id: 8,
title: "NVIDIA's Omniverse Avatar 2.0",
category: "embodied",
summary: "NVIDIA lanceert Avatar 2.0 platform voor het creëren van realistische AI-avatars met natuurlijke spraak en gebaren voor virtuele omgevingen.",
isNew: true,
age: 4
},
{
id: 9,
title: "Stability AI's SDXL Turbo",
category: "vision",
summary: "Stability AI introduceert SDXL Turbo, een ultrasnelle versie van hun Stable Diffusion model dat high-quality afbeeldingen genereert in real-time.",
isNew: false,
age: 20
},
{
id: 10,
title: "Unity's AI-powered game development",
category: "gaming",
summary: "Unity onthult nieuwe AI-tools voor game developers, waaronder automatische asset generatie en intelligente gameplay balancing algoritmen.",
isNew: false,
age: 10
},
{
id: 11,
title: "Salesforce Einstein GPT uitgebreid",
category: "business",
summary: "Salesforce breidt Einstein GPT uit met nieuwe features voor customer service automation en predictive sales analytics met verbeterde nauwkeurigheid.",
isNew: false,
age: 18
},
{
id: 12,
title: "MIT's breakthrough in quantum ML",
category: "research",
summary: "MIT onderzoekers bereiken doorbraak in quantum machine learning, waardoor exponentiële speedups mogelijk worden voor specifieke AI-taken.",
isNew: true,
age: 2
}
];
// Extra nieuwsitems om toe te voegen bij refresh
const extraNewsItems = [
{
id: 13,
title: "Adobe Firefly 3 met video-generatie",
category: "vision",
summary: "Adobe lanceert Firefly 3 met krachtige video-generatie mogelijkheden, waardoor creatieven AI-video's kunnen maken met tekst prompts.",
isNew: true,
age: 1
},
{
id: 14,
title: "Boston Dynamics Atlas humanoid robot",
category: "embodied",
summary: "Boston Dynamics onthult nieuwe Atlas robot met verbeterde AI-gestuurde bewegingen en natuurlijke menselijke interacties.",
isNew: true,
age: 1
},
{
id: 15,
title: "IBM Watson X governance platform",
category: "business",
summary: "IBM introduceert Watson X governance voor enterprise AI, met focus op compliance, privacy en verantwoorde AI-implementatie.",
isNew: true,
age: 1
},
{
id: 16,
title: "Hugging Face Transformers 5.0",
category: "tools",
summary: "Hugging Face brengt Transformers 5.0 uit met ondersteuning voor de nieuwste LLMs en verbeterde inference snelheden.",
isNew: true,
age: 1
},
{
id: 17,
title: "Stanford HAI ethiek guidelines",
category: "ethics",
summary: "Stanford Human-Centered AI Institute publiceert nieuwe richtlijnen voor verantwoorde AI-ontwikkeling in de industrie.",
isNew: true,
age: 1
},
{
id: 18,
title: "Epic Games MetaHuman Creator AI",
category: "gaming",
summary: "Epic Games integreert AI in MetaHuman Creator, waardoor ontwikkelaars realistische personages kunnen genereren met spraakcommando's.",
isNew: true,
age: 1
}
];
let currentNewsItems = [...newsItems];
let filteredItems = [...newsItems];
let nodes = [];
let connections = [];
let refreshTimer;
let countdownTimer;
let nextRefreshTime = 5 * 60; // 5 minuten in seconden
function createMindmap() {
const mindmap = document.getElementById('mindmap');
const centerX = mindmap.offsetWidth / 2;
const centerY = mindmap.offsetHeight / 2;
// Clear existing content
mindmap.innerHTML = '';
nodes = [];
connections = [];
filteredItems.forEach((item, index) => {
// Calculate organic positioning
const angle = (index / filteredItems.length) * 2 * Math.PI;
const distance = 150 + Math.random() * 200;
const x = centerX + Math.cos(angle) * distance + (Math.random() - 0.5) * 100;
const y = centerY + Math.sin(angle) * distance + (Math.random() - 0.5) * 100;
// Create node
const node = document.createElement('div');
node.className = `node ${item.category} ${item.isNew ? 'new' : ''}`;
node.style.left = x + 'px';
node.style.top = y + 'px';
node.style.width = (40 + Math.random() * 20) + 'px';
node.style.height = node.style.width;
// Adjust opacity based on age
const opacity = Math.max(0.3, 1 - (item.age * 0.03));
node.style.opacity = opacity;
node.textContent = item.title.length > 20 ? item.title.substring(0, 20) + '...' : item.title;
node.dataset.itemId = item.id;
// Add hover events
node.addEventListener('mouseenter', () => showInfo(item));
node.addEventListener('mouseleave', hideInfo);
mindmap.appendChild(node);
nodes.push({ element: node, x, y, item });
// Animate node entrance
setTimeout(() => {
node.style.transform = 'scale(1)';
}, index * 50);
});
// Create organic connections
createConnections();
animateNodes();
}
function createConnections() {
const mindmap = document.getElementById('mindmap');
// Remove existing connections
document.querySelectorAll('.connection').forEach(conn => conn.remove());
nodes.forEach((node1, i) => {
// Connect to nearby nodes organically
nodes.forEach((node2, j) => {
if (i !== j) {
const distance = Math.sqrt(
Math.pow(node1.x - node2.x, 2) + Math.pow(node1.y - node2.y, 2)
);
if (distance < 200 && Math.random() > 0.6) {
const connection = document.createElement('div');
connection.className = 'connection';
const angle = Math.atan2(node2.y - node1.y, node2.x - node1.x);
connection.style.left = node1.x + 'px';
connection.style.top = node1.y + 'px';
connection.style.width = distance + 'px';
connection.style.transform = `rotate(${angle}rad)`;
mindmap.appendChild(connection);
}
}
});
});
}
function animateNodes() {
nodes.forEach((nodeData, index) => {
const node = nodeData.element;
// Subtle floating animation
const floatAnimation = () => {
const time = Date.now() * 0.001 + index;
const offsetX = Math.sin(time * 0.5) * 3;
const offsetY = Math.cos(time * 0.3) * 2;
node.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
requestAnimationFrame(floatAnimation);
};
setTimeout(() => floatAnimation(), index * 100);
});
}
function showInfo(item) {
const infoPanel = document.getElementById('infoPanel');
const infoCategory = document.getElementById('infoCategory');
const infoTitle = document.getElementById('infoTitle');
const infoSummary = document.getElementById('infoSummary');
infoCategory.textContent = item.category.toUpperCase();
infoTitle.textContent = item.title;
infoSummary.textContent = item.summary;
infoPanel.classList.add('visible');
}
function hideInfo() {
const infoPanel = document.getElementById('infoPanel');
infoPanel.classList.remove('visible');
}
function updateFilter() {
const allFilter = document.getElementById('all');
const categoryFilters = document.querySelectorAll('.category-filter');
if (allFilter.checked) {
filteredItems = [...currentNewsItems];
categoryFilters.forEach(filter => filter.checked = true);
} else {
const activeCategories = Array.from(categoryFilters)
.filter(filter => filter.checked)
.map(filter => filter.dataset.category);
filteredItems = currentNewsItems.filter(item =>
activeCategories.includes(item.category)
);
}
createMindmap();
}
function refreshNews() {
const refreshButton = document.getElementById('refreshButton');
const refreshIcon = document.getElementById('refreshIcon');
const notification = document.getElementById('newNodeNotification');
// Start loading state
refreshButton.classList.add('loading');
refreshIcon.classList.add('spinning');
refreshButton.textContent = '';
refreshButton.appendChild(refreshIcon);
refreshButton.appendChild(document.createTextNode(' Laden...'));
// Simulate API call delay
setTimeout(() => {
// Add new items from the extra pool
const newItems = extraNewsItems.slice(0, Math.floor(Math.random() * 3) + 1); // 1-3 nieuwe items
// Reset all current items to not new and increase age
currentNewsItems.forEach(item => {
item.isNew = false;
item.age += 1;
});
// Add new items with unique IDs
newItems.forEach((item, index) => {
const newItem = {
...item,
id: Date.now() + index, // Unique ID
isNew: true,
age: 1
};
currentNewsItems.unshift(newItem);
});
// Update filtered items
updateFilter();
// Show notification if new items were added
if (newItems.length > 0) {
notification.textContent = `🆕 ${newItems.length} nieuwe AI-berichten toegevoegd!`;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Reset button state
refreshButton.classList.remove('loading');
refreshIcon.classList.remove('spinning');
refreshButton.textContent = '';
refreshButton.appendChild(refreshIcon);
refreshButton.appendChild(document.createTextNode(' Ververs Nieuws'));
// Reset timer
nextRefreshTime = 5 * 60;
startCountdown();
}, 1000);
}
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
function startCountdown() {
const countdownElement = document.getElementById('countdown');
// Clear existing timer
if (countdownTimer) {
clearInterval(countdownTimer);
}
countdownTimer = setInterval(() => {
nextRefreshTime--;
countdownElement.textContent = formatTime(nextRefreshTime);
if (nextRefreshTime <= 0) {
refreshNews();
}
}, 1000);
}
function startAutoRefresh() {
// Clear existing timer
if (refreshTimer) {
clearInterval(refreshTimer);
}
// Start countdown
startCountdown();
// Set main refresh timer
refreshTimer = setInterval(() => {
refreshNews();
}, 5 * 60 * 1000); // 5 minuten
}
// Event listeners
document.getElementById('all').addEventListener('change', (e) => {
if (e.target.checked) {
document.querySelectorAll('.category-filter').forEach(filter => {
filter.checked = true;
});
}
updateFilter();
});
document.querySelectorAll('.category-filter').forEach(filter => {
filter.addEventListener('change', () => {
const allChecked = Array.from(document.querySelectorAll('.category-filter'))
.every(f => f.checked);
document.getElementById('all').checked = allChecked;
updateFilter();
});
});
// Initialize
window.addEventListener('load', () => {
setTimeout(createMindmap, 500);
});
window.addEventListener('resize', () => {
setTimeout(createMindmap, 100);
});
</script>
</body>
</html>
