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

Progress so far. Waarom Linux still looks very ugly so WIP

Browse Source
This commit is contained in:
bdnugget
2025-09-03 13:06:02 +02:00
parent e9816d431d
commit 58e46b79c5
12 changed files with 209 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
static/css/style.css
View File

@ -374,6 +374,11 @@ p {
background: #f9fafb;
}
/* Brand-tinted light background for callouts and CTAs */
.section--brand {
background: #f0fdf4;
}
.section--hero {
padding: 4rem 0;
min-height: 80vh;
@ -415,9 +420,6 @@ p {
}
/* Legacy Section Classes - Cleaned Up */
.benefits {
background: #fff;
}
.benefits h2 {
text-align: center;
@ -547,9 +549,6 @@ p {
}
/* Distributions Section */
.distros {
background: #f9fafb;
}
.distros h2 {
text-align: center;
@ -675,9 +674,6 @@ p {
}
/* Services Section */
.services {
background: #fff;
}
.services h2 {
text-align: center;
@ -691,11 +687,56 @@ p {
gap: 2rem;
}
/* Linux Features Section */
.linux-features {
background: #f9fafb;
/* Steps grid: balanced layout 3/2/1 across breakpoints */
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 1024px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.steps-grid {
grid-template-columns: 1fr;
}
}
/* Distro tiles */
.distro-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.distro-tile {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.distro-tile:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(5,150,105,0.12);
}
.distro-tile__img {
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 0.75rem;
}
/* Linux Features Section */
.linux-features h2 {
text-align: center;
margin-bottom: 1rem;
@ -832,6 +873,15 @@ h2 a {
color: inherit;
}
/* Ensure card titles with links look identical to non-linked titles */
.card h3 a,
.card h3 a:visited,
.card h3 a:hover,
.card h3 a:active {
text-decoration: none;
color: inherit;
}
/* Reusable link wrapper to make whole cards clickable */
.card-link {
text-decoration: none;
@ -970,9 +1020,6 @@ h2 a {
min-height: 120px;
}
.contact-cta {
background: #f0fdf4;
}
.contact-cta h2 {
text-align: center;
@ -986,6 +1033,60 @@ h2 a {
gap: 2rem;
}
/* Pricing/Tarieven benefit cards */
.cta-benefit {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-benefit:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(5,150,105,0.12);
}
.benefit-icon {
width: 56px;
height: 56px;
border-radius: 9999px;
background: #ecfdf5;
border: 2px solid #bbf7d0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem auto;
}
.benefit-icon__glyph {
font-weight: 700;
color: #047857;
font-size: 1.25rem;
line-height: 1;
}
/* Collapsible disclaimer styles */
details.disclaimer {
margin-top: 0.5rem;
}
details.disclaimer summary {
cursor: pointer;
color: #047857;
font-weight: 600;
}
details.disclaimer .disclaimer-body {
background: #f9fafb;
border-left: 4px solid #059669;
padding: 1rem 1rem 1rem 1.25rem;
border-radius: 6px;
margin-top: 0.75rem;
}
/* Footer */
footer {
background: #f9fafb;

BIN
static/images/elementary.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/images/fedora.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
static/images/garuda.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
<path fill="#1e88e5" d="M28.465,38.611c0.419-1.105,0.664-2.365,0.664-3.714c0-4.133-2.211-7.494-4.929-7.494 c-2.741,0-4.951,3.361-4.951,7.494c0,1.326,0.221,2.586,0.641,3.669c-9.041,0.951-15.407,4.731-17.993,6.432 c4.355-6.278,8.909-13.638,13.262-22.105c1.083-2.101,2.101-4.178,3.05-6.211c0.375,0.243,0.751,0.509,1.171,0.775 c1.945,1.215,3.759,1.879,5.084,2.233c-0.973-0.73-2.033-1.613-3.116-2.697c-0.817-0.817-1.547-1.637-2.167-2.433 C21.016,10.538,22.608,6.669,24,3c2.32,6.144,5.217,12.842,8.841,19.893c2.343,4.531,4.731,8.754,7.117,12.644 c-0.685-0.375-1.437-0.73-2.233-1.039c-1.371-0.53-2.652-0.862-3.759-1.06c1.503,0.751,3.25,1.747,5.084,3.073 c1.194,0.885,2.254,1.769,3.161,2.631c0.021,0.021,0.021,0.021,0.045,0.045c1.26,2.056,2.565,3.957,3.846,5.813 C43.561,43.319,37.306,39.605,28.465,38.611z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1011 B

3
static/images/mint.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
<path fill="#c5e1a5" d="M21.5,44C13.492,44,7,37.508,7,29.5V18H2V4h29.031C39.298,4,46,10.702,46,18.969V44H21.5z"></path><path fill="#689f38" d="M30.031,8H6v6h2c1.657,0,3,1.343,3,3v0v11.5C11,34.851,16.149,40,22.5,40H38c2.209,0,4-1.791,4-4 V19.969C42,13.359,36.641,8,30.031,8z"></path><path fill="#fff" d="M33.5,15c-1.577,0-2.996,0.672-4,1.74c-1.004-1.069-2.423-1.74-4-1.74c-3.033,0-5.5,2.473-5.5,5.512 V28h3v-7.488c0-1.381,1.122-2.505,2.5-2.505S28,19.13,28,20.512V28h3v-7.488v0c0-1.381,1.122-2.505,2.5-2.505S36,19.13,36,20.512 V28.5c0,1.93-1.57,3.5-3.5,3.5h-12c-1.93,0-3.5-1.57-3.5-3.5V12h-3v16.5c0,3.584,2.916,6.5,6.5,6.5h12c3.584,0,6.5-2.916,6.5-6.5 v-7.988C39,17.472,36.533,15,33.5,15z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 903 B

1
static/images/popos.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0 C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16 z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029 C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029 l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677 C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547 s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/images/ubuntu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
templates/contact.html
View File

@ -60,7 +60,7 @@
<section class="page-hero">
<div class="container">
<h1>Neem contact op</h1>
<p>Heeft u vragen over Linux‑migratie? Ik help u graag verder!</p>
<p>Heeft u vragen over Linux-migratie? Ik help u graag verder!</p>
</div>
</section>
@ -101,7 +101,7 @@
<div class="contact-hours">
<h3>Openingstijden</h3>
<p>Maandag – vrijdag: 09:00 – 17:00 (op afspraak)</p>
<p>Maandag - vrijdag: 09:00 - 17:00 (op afspraak)</p>
<p>Weekend: op afspraak</p>
</div>
</div>

41
templates/diensten.html
View File

@ -64,7 +64,7 @@
</div>
<div class="card card--service">
<h3>Datamigratie</h3>
<p>Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux.</p>
<p>Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux. Zie ook de <a href="#backup-disclaimer">back-updisclaimer</a> hieronder.</p>
</div>
<div class="card card--service">
<h3>Training en ondersteuning</h3>
@ -74,24 +74,40 @@
</div>
</section>
<section class="section section--light-green contact-cta">
<section class="section section--light-green services">
<div class="container">
<h2>Mijn aanpak</h2>
<div class="steps-grid">
<div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>We bespreken wensen, hardware en gebruik.</p></div>
<div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB om te testen op uw pc.</p></div>
<div class="card card--service"><h3>3. Installatie</h3><p>Compleet ingericht met updates, drivers en basissoftware.</p></div>
<div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto’s en documenten veilig overzetten.</p></div>
<div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training en laagdrempelige ondersteuning.</p></div>
</div>
<div style="margin-top:1.5rem">
<p><strong>Daarnaast</strong> geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.</p>
</div>
</div>
</section>
<section class="section section--brand contact-cta">
<div class="container">
<h2>Tarieven</h2>
<div class="cta-benefits">
<div class="cta-benefit">
<div class="benefit-icon">💶</div>
<div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">€</span></div>
<h3>€20 per half uur</h3>
<p>Transparant, zonder verborgen kosten. Reistijd in overleg, binnen Het Hogeland vaak kosteloos.</p>
</div>
<div class="cta-benefit">
<div class="benefit-icon">🧾</div>
<div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">i</span></div>
<h3>Voorbeelden</h3>
<p>Installatie + basisinrichting: 1 à 2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.</p>
<p>Installatie + basisinrichting + uitleg: 1 à 2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.</p>
</div>
<div class="cta-benefit">
<div class="benefit-icon">🔁</div>
<div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">+</span></div>
<h3>Extra service</h3>
<p>Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de disclaimer hieronder.</p>
<p>Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de <a href="#backup-disclaimer">back-updisclaimer</a>.</p>
</div>
</div>
</div>
@ -99,9 +115,14 @@
<section class="contact-content">
<div class="container">
<h2>Belangrijk over back‑ups</h2>
<p>Ik lever een Linux‑installatie‑ en migratieservice en ben geen back‑updienst. <strong>Back‑ups maken en bewaren is in principe de verantwoordelijkheid van de klant.</strong> Als extra service kan ik, op uw verzoek, data kopiëren naar door u aangeleverde USB‑sticks of een externe schijf.</p>
<p>Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan (bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten). <strong>U blijft verantwoordelijk voor uw eigen data</strong>. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back‑up te maken.</p>
<h2 id="backup-disclaimer">Belangrijk over back-ups</h2>
<details class="disclaimer">
<summary>Lees de back-updisclaimer</summary>
<div class="disclaimer-body">
<p>Ik lever een Linux-installatie- en migratieservice. <strong>Back-ups maken en bewaren is in principe de verantwoordelijkheid van de klant.</strong> Als extra service kan ik, op uw verzoek, data kopiëren naar door u aangeleverde USB-sticks of een externe schijf. Als u geen opslag bij de hand heeft, kan ik USB-sticks van verschillende groottes meebrengen en leveren tegen een normale, eerlijke prijs.</p>
<p>Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan, bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten. <strong>U blijft verantwoordelijk voor uw eigen data</strong>. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back-up te maken.</p>
</div>
</details>
<div class="about-cta">
<a href="/contact" class="btn btn-primary">Vrijblijvend contact opnemen</a>
</div>

2
templates/footer.html
View File

@ -20,7 +20,7 @@
<h3>Gemeenschap</h3>
<p>Lid van <a href="https://nllgg.nl" target="_blank">Nederlandse Linux Gebruikers Groep</a> (NLLGG.nl)</p>
<p>Actief bij <a href="https://buurtlinux.nl" target="_blank">Buurtlinux.nl</a> initiatief</p>
<p>Ik ondersteun de <a href="https://endof10.org" target="_blank">End‑of‑10</a>-beweging voor duurzaam computergebruik.</p>
<p>Ik ondersteun de <a href="https://endof10.org" target="_blank">End-of-10</a>-beweging voor duurzaam computergebruik.</p>
<p><a href="/over-mij">Over mij</a> · <a href="/contact">Contact</a></p>
</div>
</div>

22
templates/index.html
View File

@ -152,6 +152,20 @@
</div>
</section>
<section class="section section--light services">
<div class="container">
<h2><a href="/diensten">Mijn aanpak</a></h2>
<div class="steps-grid" style="margin-top:1.5rem">
<div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.</p></div>
<div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.</p></div>
<div class="card card--service"><h3>3. Installatie</h3><p>Veilig, met updates, codecs, printer, Nederlandse taal en basissoftware.</p></div>
<div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto's, documenten en favorieten overzetten.</p></div>
<div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training, daarna laagdrempelig bereikbaar voor vragen.</p></div>
</div>
<p style="margin-top:1rem"><strong>Daarnaast</strong> geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.</p>
</div>
</section>
<section id="distros" class="section section--light-green distros">
<div class="container">
<h2><a href="/linux">Welke Linux past bij u?</a></h2>
@ -296,10 +310,10 @@
<h3>Installatieservice</h3>
<p>Professionele Linux-installatie op uw computer, inclusief alle benodigde software.</p>
</a>
<a class="card card--service card-link" href="/diensten">
<h3>Datamigratie</h3>
<p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux.</p>
</a>
<div class="card card--service">
<h3><a href="/diensten">Datamigratie</a></h3>
<p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux. Zie de <a href="/diensten#backup-disclaimer">back-updisclaimer</a>.</p>
</div>
<a class="card card--service card-link" href="/diensten">
<h3>Training en ondersteuning</h3>
<p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux-systeem.</p>

56
templates/linux.html
View File

@ -46,35 +46,47 @@
<section class="page-hero">
<div class="container">
<h1>Waarom Linux?</h1>
<p>Nieuw bij Linux? Geen zorgen. Linux is een veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven, zonder licentiekosten. Hieronder vindt u een korte beslishulp, mijn aanpak en voorbeelden in beeld.</p>
<p>Nieuw bij Linux? Geen zorgen. Linux is een veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven, zonder licentiekosten. Hieronder vindt u een korte beslishulp en voorbeelden in beeld.</p>
</div>
</section>
{{template "benefits" .}}
<section class="section section--light-green distros">
<section class="section section--light distros">
<div class="container">
<h2>Welke Linux past bij u?</h2>
<p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
<div class="services-grid">
<div class="card card--service"><h3>Windows‑achtig en eenvoudig</h3><p><strong>Linux Mint</strong> – vertrouwde interface, zeer stabiel.</p></div>
<div class="card card--service"><h3>Populair en veelzijdig</h3><p><strong>Ubuntu LTS</strong> – grote community, langetermijnupdates.</p></div>
<div class="card card--service"><h3>Gaming en drivers</h3><p><strong>Pop!_OS</strong> – gaming‑geoptimaliseerd, NVIDIA‑ondersteuning.</p></div>
<div class="card card--service"><h3>Design en eenvoud</h3><p><strong>Elementary OS</strong> – elegant en eenvoudig.</p></div>
<div class="card card--service"><h3>Prestaties en tweaken</h3><p><strong>Garuda Linux</strong> – Arch‑basis, snelle prestaties.</p></div>
</div>
</div>
</section>
<section class="section section--light-green">
<div class="container">
<h2>Mijn aanpak</h2>
<div class="services-grid">
<div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.</p></div>
<div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.</p></div>
<div class="card card--service"><h3>3. Installatie</h3><p>Veilig, met updates, codecs, printer, NL‑taal en basissoftware.</p></div>
<div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto’s, documenten en favorieten overzetten.</p></div>
<div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training, daarna laagdrempelig bereikbaar voor vragen.</p></div>
<p class="section-subtitle">Een paar goede keuzes met elk een duidelijk profiel.</p>
<div class="distro-tiles">
<div class="distro-tile">
<img src="/static/images/mint.svg" alt="Linux Mint" class="distro-tile__img">
<h3>Linux Mint</h3>
<p>Windows-achtig, stabiel, vertrouwd voor overstappers.</p>
</div>
<div class="distro-tile">
<img src="/static/images/ubuntu.png" alt="Ubuntu" class="distro-tile__img">
<h3>Ubuntu LTS</h3>
<p>Populair, langetermijnupdates, breed inzetbaar.</p>
</div>
<div class="distro-tile">
<img src="/static/images/popos.svg" alt="Pop!_OS" class="distro-tile__img">
<h3>Pop!_OS</h3>
<p>Gaming-geoptimaliseerd, uitstekende NVIDIA-ondersteuning.</p>
</div>
<div class="distro-tile">
<img src="/static/images/fedora.png" alt="Fedora" class="distro-tile__img">
<h3>Fedora</h3>
<p>Nieuwste technologie, Red Hat-basis, ontwikkelaarstools.</p>
</div>
<div class="distro-tile">
<img src="/static/images/elementary.png" alt="Elementary OS" class="distro-tile__img">
<h3>Elementary OS</h3>
<p>Elegant, eenvoudig, design-gericht.</p>
</div>
<div class="distro-tile">
<img src="/static/images/garuda.svg" alt="Garuda Linux" class="distro-tile__img">
<h3>Garuda Linux</h3>
<p>Arch-basis, snelle prestaties, modern.</p>
</div>
</div>
</div>
</section>