490 lines
26 KiB
HTML
490 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Title}}</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<div class="nav-logo">
|
|
<h1><a href="/">Hogeland Linux</a></h1>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="/">Home</a>
|
|
<a href="/contact">Contact</a>
|
|
<a href="#services">Diensten</a>
|
|
<a href="#distros">Distributies</a>
|
|
</div>
|
|
<button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
|
|
<span>☰</span>
|
|
</button>
|
|
<div class="mobile-menu" id="mobile-menu">
|
|
<a href="/">Home</a>
|
|
<a href="/contact">Contact</a>
|
|
<a href="#services">Diensten</a>
|
|
<a href="#distros">Distributies</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="home" class="hero">
|
|
<div class="hero-content">
|
|
<h2>Geef uw computer een tweede leven</h2>
|
|
<p class="hero-subtitle">Windows 10 ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
|
|
<div class="hero-buttons">
|
|
<a href="#voordelen" class="btn btn-primary">Meer weten</a>
|
|
<a href="/contact" class="btn btn-secondary">Gratis advies</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-image">
|
|
<div class="terminal-window">
|
|
<div class="terminal-header">
|
|
<div class="terminal-buttons">
|
|
<span class="btn-close"></span>
|
|
<span class="btn-minimize"></span>
|
|
<span class="btn-maximize"></span>
|
|
</div>
|
|
<div class="terminal-title">Terminal</div>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<div class="terminal-line">
|
|
<span class="prompt">ainrommer@computer:~$</span>
|
|
<span class="command">sudo pacman -Syu</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="output">:: Synchronizing package databases...</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="output">✓ Everything is up to date.</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="prompt">ainrommer@computer:~$</span>
|
|
<span class="command">fastfetch</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="output">🔥 Garuda Linux (Dragonized Gaming)</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="output">🐧 Linux 6.11.2-zen1-1-zen</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="output">💾 8.2 GiB / 16.0 GiB (51%)</span>
|
|
</div>
|
|
<div class="terminal-line">
|
|
<span class="prompt">ainrommer@computer:~$</span>
|
|
<span class="cursor">_</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="voordelen" class="benefits">
|
|
<div class="container">
|
|
<h2>Waarom Linux kiezen?</h2>
|
|
<div class="benefits-grid">
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">🛡️</div>
|
|
<h3>Veilig & Betrouwbaar</h3>
|
|
<p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates, en volledige controle over uw systeem.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">💰</div>
|
|
<h3>Volledig Gratis</h3>
|
|
<p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">🔄</div>
|
|
<h3>Oude Hardware Hergebruiken</h3>
|
|
<p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">🌱</div>
|
|
<h3>Milieuvriendelijk</h3>
|
|
<p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">🔒</div>
|
|
<h3>Privacy Bescherming</h3>
|
|
<p>Geen tracking, geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">⚡</div>
|
|
<h3>Snel & Efficiënt</h3>
|
|
<p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="windows10-eol" class="windows-eol">
|
|
<div class="container">
|
|
<h2>Windows 10 Ondersteuning Eindigt</h2>
|
|
<div class="eol-content">
|
|
<div class="eol-text">
|
|
<p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
|
|
<ul>
|
|
<li>❌ Geen beveiligingsupdates meer</li>
|
|
<li>❌ Geen technische ondersteuning</li>
|
|
<li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
|
|
<li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
|
|
</ul>
|
|
<p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een moderne, veilige alternatief dat perfect werkt op uw huidige hardware.</p>
|
|
</div>
|
|
<div class="eol-stats">
|
|
<div class="stat">
|
|
<div class="stat-icon">💻</div>
|
|
<h3>1+ miljard</h3>
|
|
<p>Windows 10 computers wereldwijd</p>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-icon">🗑️</div>
|
|
<h3>240 miljoen ton</h3>
|
|
<p>Potentiële e-waste zonder migratie</p>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-icon">🔒</div>
|
|
<h3>0 updates</h3>
|
|
<p>Na oktober 2025</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="distros" class="distros">
|
|
<div class="container">
|
|
<h2>Welke Linux Past Bij U?</h2>
|
|
<p class="section-subtitle">Er zijn vele Linux distributies, elk met hun eigen voordelen. Wij helpen u de perfecte keuze maken.</p>
|
|
<div class="distros-grid">
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🐧</div>
|
|
<h3>Ubuntu</h3>
|
|
<span class="distro-tag">Populair</span>
|
|
</div>
|
|
<p class="distro-description">Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Eenvoudig</span>
|
|
<span class="feature">✓ Grote community</span>
|
|
<span class="feature">✓ LTS versies</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Beginners, kantoorwerk, algemeen gebruik</strong></p>
|
|
</div>
|
|
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🍃</div>
|
|
<h3>Linux Mint</h3>
|
|
<span class="distro-tag">Windows-achtig</span>
|
|
</div>
|
|
<p class="distro-description">Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Vertrouwde interface</span>
|
|
<span class="feature">✓ Multimedia ondersteuning</span>
|
|
<span class="feature">✓ Zeer stabiel</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
|
|
</div>
|
|
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🚀</div>
|
|
<h3>Pop!_OS</h3>
|
|
<span class="distro-tag">Gaming</span>
|
|
</div>
|
|
<p class="distro-description">Gemaakt door System76. Uitstekend voor gaming en creatief werk.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Gaming-geoptimaliseerd</span>
|
|
<span class="feature">✓ NVIDIA ondersteuning</span>
|
|
<span class="feature">✓ Modern ontwerp</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Gamers, ontwikkelaars, jongeren</strong></p>
|
|
</div>
|
|
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🎨</div>
|
|
<h3>Elementary OS</h3>
|
|
<span class="distro-tag">Mooi</span>
|
|
</div>
|
|
<p class="distro-description">Prachtig ontwerp geïnspireerd door macOS. Eenvoudig en elegant.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Elegant ontwerp</span>
|
|
<span class="feature">✓ Privacy-gericht</span>
|
|
<span class="feature">✓ Mac-achtig</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Mac gebruikers, designers, stijlbewuste mensen</strong></p>
|
|
</div>
|
|
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🔧</div>
|
|
<h3>Fedora</h3>
|
|
<span class="distro-tag">Geavanceerd</span>
|
|
</div>
|
|
<p class="distro-description">Nieuwste technologieën en functies. Voor technische gebruikers.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Geavanceerde technologie</span>
|
|
<span class="feature">✓ Red Hat basis</span>
|
|
<span class="feature">✓ Ontwikkelaarstools</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT professionals, tech-enthousiasten</strong></p>
|
|
</div>
|
|
|
|
<div class="distro-card">
|
|
<div class="distro-header">
|
|
<div class="distro-logo">🔥</div>
|
|
<h3>Garuda Linux</h3>
|
|
<span class="distro-tag">Prestaties</span>
|
|
</div>
|
|
<p class="distro-description">Arch-gebaseerd met extreme prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.</p>
|
|
<div class="distro-features">
|
|
<span class="feature">✓ Arch basis</span>
|
|
<span class="feature">✓ Gaming-klaar</span>
|
|
<span class="feature">✓ Mooie interface</span>
|
|
</div>
|
|
<p class="distro-ideal">Ideaal voor: <strong>Powergebruikers, gamers, prestatie-enthousiasten</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="distro-cta">
|
|
<h3>Niet zeker welke te kiezen?</h3>
|
|
<p>Geen probleem! Wij adviseren u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
|
|
<a href="/contact" class="btn btn-primary">Persoonlijk advies</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="diensten" class="services">
|
|
<div class="container">
|
|
<h2>Onze Diensten</h2>
|
|
<div class="services-grid">
|
|
<div class="service-card">
|
|
<h3>Gratis Advies</h3>
|
|
<p>Wij bekijken uw huidige computer en adviseren over de beste Linux distributie voor uw behoeften.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<h3>Installatie Service</h3>
|
|
<p>Professionele installatie van Linux op uw computer, inclusief alle benodigde software.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<h3>Data Migratie</h3>
|
|
<p>Veilige overdracht van al uw bestanden, foto's, documenten van Windows naar Linux.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<h3>Training & Ondersteuning</h3>
|
|
<p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux systeem.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="linux-features">
|
|
<div class="container">
|
|
<h2>Linux in Actie</h2>
|
|
<p class="section-subtitle">Zie hoe Linux eruitziet en werkt op verschillende apparaten</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-showcase">
|
|
<div class="feature-mockup desktop-mockup">
|
|
<div class="mockup-header">
|
|
<div class="mockup-buttons">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
<div class="mockup-title">Garuda Linux Desktop</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="desktop-wallpaper">
|
|
<div class="desktop-panel">
|
|
<div class="panel-left">
|
|
<span class="app-icon">🏠</span>
|
|
<span class="app-icon">📁</span>
|
|
<span class="app-icon">🌐</span>
|
|
<span class="app-icon">✉️</span>
|
|
</div>
|
|
<div class="panel-right">⚙️ 📶 🔋 12:34</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Bekende Desktop Interface</h3>
|
|
<p>Linux ziet er vertrouwd uit met een moderne, gebruiksvriendelijke interface.</p>
|
|
</div>
|
|
|
|
<div class="feature-showcase">
|
|
<div class="feature-mockup app-mockup">
|
|
<div class="mockup-header">
|
|
<div class="mockup-buttons">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
<div class="mockup-title">Software Center</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="app-list">
|
|
<div class="app-item">📄 LibreOffice <span class="install-btn">Installeren</span></div>
|
|
<div class="app-item">🎨 GIMP <span class="install-btn">Installeren</span></div>
|
|
<div class="app-item">🎵 Spotify <span class="install-btn">Installeren</span></div>
|
|
<div class="app-item">💬 Discord <span class="install-btn">Installeren</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Eenvoudig Software Installeren</h3>
|
|
<p>Duizenden gratis programma's met één klik installeren, net als een app store.</p>
|
|
</div>
|
|
|
|
<div class="feature-showcase">
|
|
<div class="feature-mockup performance-mockup">
|
|
<div class="performance-bars">
|
|
<div class="performance-item">
|
|
<div class="perf-label">🚀 Opstarttijd</div>
|
|
<div class="perf-bar">
|
|
<div class="perf-fill windows" style="width: 80%">Windows: 45s</div>
|
|
</div>
|
|
<div class="perf-bar">
|
|
<div class="perf-fill linux" style="width: 35%">Linux: 15s</div>
|
|
</div>
|
|
</div>
|
|
<div class="performance-item">
|
|
<div class="perf-label">💾 RAM gebruik</div>
|
|
<div class="perf-bar">
|
|
<div class="perf-fill windows" style="width: 70%">Windows: 3.5GB</div>
|
|
</div>
|
|
<div class="perf-bar">
|
|
<div class="perf-fill linux" style="width: 30%">Linux: 1.5GB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Superieure Prestaties</h3>
|
|
<p>Linux maakt uw computer sneller en gebruikt minder geheugen dan Windows.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="container">
|
|
<h2>Klaar voor de overstap?</h2>
|
|
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux!</p>
|
|
<a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>{{.CompanyName}}</h3>
|
|
<p>Specialist in Linux migratie en duurzame computing oplossingen.</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Contact</h3>
|
|
<p>Email: {{.Email}}</p>
|
|
<p>Telefoon: {{.Phone}}</p>
|
|
<p>KVK: {{.KVK}}</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Ondersteuning</h3>
|
|
<p>Wij ondersteunen de <a href="https://endof10.org" target="_blank">End of 10</a> beweging voor duurzame computing.</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 {{.CompanyName}}. Alle rechten voorbehouden.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleMobileMenu() {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenu.classList.toggle('active');
|
|
}
|
|
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const menuToggle = document.querySelector('.mobile-menu-toggle');
|
|
|
|
if (!mobileMenu.contains(event.target) && !menuToggle.contains(event.target)) {
|
|
mobileMenu.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Close mobile menu when clicking on a link
|
|
document.querySelectorAll('.mobile-menu a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
document.getElementById('mobile-menu').classList.remove('active');
|
|
});
|
|
});
|
|
|
|
// Terminal animation
|
|
const terminalBody = document.querySelector('.terminal-body');
|
|
const lines = [
|
|
{ type: 'prompt', content: 'ainrommer@computer ~ $' },
|
|
{ type: 'command', content: 'neofetch', delay: 1000 },
|
|
{ type: 'output', content: '\n .-/+oossssoo+/-.\n .:+ssssssssssssssss+:.\n -+ssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n -+ssssssssssssssssssssss+-\n-+ssssssssssssssssssssss+-\n`-+ssssssssssssssssssss+-`\n `-+ssssssssssssssssss+-`\n `-+ssssssssssssssss+-`\n `-+ssssssssssssss+-`\n `-+ssssssssssss+-`\n `-+ssssssssss+-`\n `-+ssssssss+-`\n `-+ssssss+-`\n `-+ssss+-`\n `-+ss+-`\n `-+s+-`\n `-+-`\n ``\nOS: Arch Linux x86_64\nKernel: 6.6.8-arch1-1\nUptime: 3 hours, 42 mins\nPackages: 1337 (pacman)\nShell: zsh 5.9\nResolution: 1920x1080\nDE: KDE Plasma 5.27.10\nWM: KWin\nWM Theme: Breeze\nTheme: Breeze Dark [Plasma], Breeze [GTK2/3]\nIcons: Breeze Dark [Plasma], breeze-dark [GTK2/3]\nTerminal: konsole\nCPU: AMD Ryzen 7 5800X (16) @ 3.800GHz\nGPU: NVIDIA GeForce RTX 3070\nMemory: 2847MiB / 32768MiB', delay: 2000 },
|
|
{ type: 'prompt', content: 'ainrommer@computer ~ $' },
|
|
{ type: 'command', content: 'sudo pacman -Syu', delay: 3000 },
|
|
{ type: 'output', content: ':: Synchronizing package databases...\n core 174.7 KiB 623 KiB/s 00:00 [######################] 100%\n extra 1744.4 KiB 1234 KiB/s 00:01 [######################] 100%\n multilib 193.9 KiB 567 KiB/s 00:00 [######################] 100%\n:: Starting full system upgrade...\n:: Replace gtk4 with extra/gtk4? [Y/n] y\nthere is nothing to do', delay: 4000 },
|
|
{ type: 'prompt', content: 'ainrommer@computer ~ $' },
|
|
{ type: 'cursor', content: '', delay: 5000 }
|
|
];
|
|
|
|
function typeWriter(text, element, speed = 50) {
|
|
return new Promise((resolve) => {
|
|
let i = 0;
|
|
const timer = setInterval(() => {
|
|
if (i < text.length) {
|
|
element.textContent += text.charAt(i);
|
|
i++;
|
|
} else {
|
|
clearInterval(timer);
|
|
resolve();
|
|
}
|
|
}, speed);
|
|
});
|
|
}
|
|
|
|
function animateTerminal() {
|
|
terminalBody.innerHTML = '';
|
|
let currentDelay = 0;
|
|
|
|
lines.forEach((line, index) => {
|
|
setTimeout(() => {
|
|
const lineElement = document.createElement('div');
|
|
lineElement.className = 'terminal-line';
|
|
|
|
if (line.type === 'prompt') {
|
|
lineElement.innerHTML = '<span class="prompt">' + line.content + '</span>';
|
|
} else if (line.type === 'command') {
|
|
lineElement.innerHTML = '<span class="prompt">ainrommer@computer ~ $ </span><span class="command">' + line.content + '</span>';
|
|
} else if (line.type === 'output') {
|
|
lineElement.innerHTML = '<span class="output">' + line.content + '</span>';
|
|
} else if (line.type === 'cursor') {
|
|
lineElement.innerHTML = '<span class="prompt">ainrommer@computer ~ $ </span><span class="cursor">█</span>';
|
|
}
|
|
|
|
terminalBody.appendChild(lineElement);
|
|
terminalBody.scrollTop = terminalBody.scrollHeight;
|
|
}, currentDelay);
|
|
|
|
currentDelay += line.delay || 0;
|
|
});
|
|
}
|
|
|
|
// Start animation when page loads
|
|
window.addEventListener('load', () => {
|
|
setTimeout(animateTerminal, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |