bdnugget/linuxservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V3

Browse Source
This commit is contained in:
bdnugget
2025-07-04 15:47:24 +02:00
parent 6e52761bb9
commit 214c350fb8
5 changed files with 711 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -1,4 +1,4 @@
# poepiescheet - Linux Migratie Service Website
# Hogeland Linux - Linux Migratie Service Website
Een Nederlandse website voor Linux migratie services in lijn met de endof10.org beweging.
@ -52,16 +52,18 @@ Om uw eigen contactgegevens in te vullen, pas de volgende waarden aan in `main.g
```go
// Vervang deze waarden met uw eigen gegevens:
KVK: "12345678", // Uw KVK nummer
Email: "info@poepiescheet.nl", // Uw email adres
Email: "info@hogelandlinux.nl", // Uw email adres
Phone: "+31 6 12345678", // Uw telefoonnummer
```
## Pagina's
### Hoofdpagina (/)
- Hero sectie met duidelijke boodschap
- Hero sectie met animeerde terminal demo
- Voordelen van Linux migratie
- Informatie over Windows 10 End of Life
- Linux distributies showcase met aanbevelingen
- Linux features met visuele mockups
- Diensten overzicht
- Call-to-action
@ -78,6 +80,26 @@ Het design is:
- **Toegankelijk**: Geschikt voor alle leeftijden
- **Responsive**: Werkt op desktop, tablet en mobiel
- **Professioneel**: Vertrouwen opwekkend voor bedrijven
- **Eco-vriendelijk**: Groene kleurenpalet die duurzaamheid benadrukt
- **Tech-georiënteerd**: Linux terminal demo en visuele mockups
## Technische Features
### Visual Elements
- **Animeerde Terminal**: Realistische Arch Linux terminal met pacman en fastfetch
- **Distro Showcase**: 6 populaire Linux distributies met doelgroepen
- **Desktop Mockups**: Visuele representaties van Linux interfaces
- **Performance Vergelijkingen**: Grafische weergave van Linux vs Windows prestaties
- **Responsive Design**: Optimaal op alle apparaten
### Linux Distributies
De website toont:
- **Ubuntu**: Voor beginners en algemeen gebruik
- **Linux Mint**: Voor Windows gebruikers die overstappen
- **Pop!_OS**: Voor gamers en developers
- **Elementary OS**: Voor Mac gebruikers en designers
- **Fedora**: Voor tech enthusiasts en IT professionals
- **Garuda Linux**: Voor power users en performance enthusiasts
## Belangrijke Boodschappen

10
main.go
View File

@ -25,10 +25,10 @@ func main() {
// Home page
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := PageData{
CompanyName: "poepiescheet",
CompanyName: "Hogeland Linux",
Title: "Linux Migratie Service - Uw Computer Nieuw Leven Geven",
KVK: "12345678", // Replace with actual KVK number
Email: "info@poepiescheet.nl",
Email: "info@hogelandlinux.nl",
Phone: "+31 6 12345678",
}
@ -41,10 +41,10 @@ func main() {
// Contact page
http.HandleFunc("/contact", func(w http.ResponseWriter, r *http.Request) {
data := PageData{
CompanyName: "poepiescheet",
Title: "Contact - poepiescheet",
CompanyName: "Hogeland Linux",
Title: "Contact - Hogeland Linux",
KVK: "12345678", // Replace with actual KVK number
Email: "info@poepiescheet.nl",
Email: "info@hogelandlinux.nl",
Phone: "+31 6 12345678",
}

451
static/style.css
View File

@ -127,9 +127,92 @@ p {
align-items: center;
}
.computer-icon {
font-size: 8rem;
opacity: 0.8;
/* Terminal Window Styling */
.terminal-window {
background: #1a1a1a;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 520px;
margin: 0 auto 0 0;
overflow: hidden;
border: 1px solid #333;
}
.terminal-header {
background: #2d2d2d;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #333;
}
.terminal-buttons {
display: flex;
gap: 8px;
}
.terminal-buttons span {
width: 12px;
height: 12px;
border-radius: 50%;
}
.btn-close {
background: #ff5f57;
}
.btn-minimize {
background: #ffbd2e;
}
.btn-maximize {
background: #28ca42;
}
.terminal-title {
color: #ccc;
font-size: 0.9rem;
font-weight: 500;
}
.terminal-body {
padding: 20px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
font-size: 14px;
line-height: 1.6;
min-height: 200px;
}
.terminal-line {
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.prompt {
color: #10b981;
font-weight: 600;
min-width: 180px;
}
.command {
color: #60a5fa;
}
.output {
color: #d1d5db;
}
.cursor {
color: #10b981;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Buttons */
@ -264,6 +347,16 @@ p {
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stat:hover {
transform: translateY(-5px);
}
.stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.stat h3 {
@ -272,6 +365,151 @@ p {
margin-bottom: 0.5rem;
}
/* Distributions Section */
.distros {
padding: 5rem 0;
background: #f9fafb;
}
.distros h2 {
text-align: center;
margin-bottom: 1rem;
color: #047857;
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #6b7280;
margin-bottom: 4rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.distros-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.distro-card {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.distro-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #059669, #10b981);
}
.distro-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
border-color: #a7f3d0;
}
.distro-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.distro-logo {
font-size: 2.5rem;
min-width: 3rem;
}
.distro-header h3 {
color: #047857;
margin: 0;
flex: 1;
min-width: 120px;
}
.distro-tag {
background: linear-gradient(135deg, #059669, #10b981);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.distro-description {
color: #4b5563;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.distro-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.feature {
background: #ecfdf5;
color: #047857;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid #bbf7d0;
}
.distro-ideal {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
padding: 1rem;
margin: 0;
color: #0c4a6e;
font-size: 0.9rem;
}
.distro-ideal strong {
color: #0369a1;
}
.distro-cta {
text-align: center;
background: white;
padding: 3rem 2rem;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #bbf7d0;
}
.distro-cta h3 {
color: #047857;
margin-bottom: 1rem;
}
.distro-cta p {
color: #6b7280;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Services Section */
.services {
padding: 5rem 0;
@ -307,6 +545,188 @@ p {
margin-bottom: 1rem;
}
/* Linux Features Section */
.linux-features {
padding: 5rem 0;
background: #f9fafb;
}
.linux-features h2 {
text-align: center;
margin-bottom: 1rem;
color: #047857;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.feature-showcase {
text-align: center;
}
.feature-mockup {
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
margin-bottom: 2rem;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.mockup-header {
background: #f3f4f6;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.mockup-buttons {
display: flex;
gap: 6px;
}
.mockup-buttons span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #d1d5db;
}
.mockup-title {
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.mockup-content {
padding: 20px;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Desktop Mockup */
.desktop-wallpaper {
width: 100%;
height: 160px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
position: relative;
display: flex;
align-items: flex-end;
}
.desktop-panel {
background: rgba(0, 0, 0, 0.8);
width: 100%;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
}
.panel-left {
display: flex;
gap: 12px;
}
.app-icon {
font-size: 1.2rem;
}
.panel-right {
color: white;
font-size: 0.8rem;
}
/* App Mockup */
.app-list {
width: 100%;
}
.app-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin-bottom: 8px;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.install-btn {
background: #059669;
color: white;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
}
/* Performance Mockup */
.performance-bars {
width: 100%;
}
.performance-item {
margin-bottom: 24px;
}
.perf-label {
text-align: left;
margin-bottom: 8px;
font-weight: 500;
color: #374151;
}
.perf-bar {
background: #e5e7eb;
height: 24px;
border-radius: 12px;
margin-bottom: 6px;
position: relative;
overflow: hidden;
}
.perf-fill {
height: 100%;
border-radius: 12px;
display: flex;
align-items: center;
padding: 0 12px;
font-size: 0.8rem;
font-weight: 500;
color: white;
position: relative;
}
.perf-fill.windows {
background: linear-gradient(90deg, #f59e0b, #d97706);
}
.perf-fill.linux {
background: linear-gradient(90deg, #10b981, #059669);
}
.feature-showcase h3 {
color: #047857;
margin-bottom: 1rem;
}
.feature-showcase p {
color: #6b7280;
line-height: 1.6;
}
/* CTA Section */
.cta {
padding: 5rem 0;
@ -533,6 +953,10 @@ footer {
grid-template-columns: 1fr;
}
.distros-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
@ -541,6 +965,11 @@ footer {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.cta-benefits {
grid-template-columns: 1fr;
}
@ -570,8 +999,20 @@ footer {
gap: 1rem;
}
.computer-icon {
font-size: 6rem;
.terminal-window {
max-width: 100%;
margin: 0 1rem;
}
.terminal-body {
padding: 16px;
font-size: 12px;
min-height: 150px;
}
.prompt {
min-width: 130px;
font-size: 11px;
}
}

1
templates/contact.html
View File

@ -17,6 +17,7 @@
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/#voordelen">Voordelen</a></li>
<li><a href="/#distros">Linux Keuze</a></li>
<li><a href="/#diensten">Diensten</a></li>
<li><a href="/contact" class="active">Contact</a></li>
</ul>

235
templates/index.html
View File

@ -17,6 +17,7 @@
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#voordelen">Voordelen</a></li>
<li><a href="#distros">Linux Keuze</a></li>
<li><a href="#diensten">Diensten</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
@ -35,7 +36,45 @@
</div>
</div>
<div class="hero-image">
<div class="computer-icon">💻</div>
<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>
@ -93,18 +132,129 @@
</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">✓ Vertrouwd interface</span>
<span class="feature">✓ Multimedia support</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. Excellent voor gaming en creatief werk.</p>
<div class="distro-features">
<span class="feature">✓ Gaming optimized</span>
<span class="feature">✓ NVIDIA support</span>
<span class="feature">✓ Modern design</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Gamers, developers, 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 design geïnspireerd door macOS. Eenvoudig en elegant.</p>
<div class="distro-features">
<span class="feature">✓ Elegant design</span>
<span class="feature">✓ Privacy-focused</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 features. Voor technische gebruikers.</p>
<div class="distro-features">
<span class="feature">✓ Cutting-edge</span>
<span class="feature">✓ Red Hat basis</span>
<span class="feature">✓ Developer tools</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Developers, IT professionals, tech enthusiasts</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🔥</div>
<h3>Garuda Linux</h3>
<span class="distro-tag">Performance</span>
</div>
<p class="distro-description">Arch-based met extreme prestaties. Prachtig design en gaming-geoptimaliseerd.</p>
<div class="distro-features">
<span class="feature">✓ Arch basis</span>
<span class="feature">✓ Gaming ready</span>
<span class="feature">✓ Beautiful UI</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Power users, gamers, performance enthusiasts</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>
@ -129,6 +279,89 @@
</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>