From 0033088c4e78abb2127dfc0fef26fe6741b48004 Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Fri, 26 Jul 2024 17:05:31 +0200
Subject: [PATCH] Added privacy statement.

---
 public/includes/footer.html |  4 +--
 public/includes/nav.html    | 10 +++---
 public/index.html           |  4 +--
 public/privacy.html         | 52 +++++++++++++++++++++++++++++++
 src/scss/styles.scss        | 61 ++++++++++++++++++++++++++++---------
 5 files changed, 106 insertions(+), 25 deletions(-)
 create mode 100644 public/privacy.html

diff --git a/public/includes/footer.html b/public/includes/footer.html
index 37b7459..3a83a88 100644
--- a/public/includes/footer.html
+++ b/public/includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="pt-4 bg-secondary-subtle">
+<footer class="bg-secondary-subtle">
 
   <section class="container-xxl pt-4">
     <div class="row justify-content-center">
@@ -32,6 +32,6 @@
   </section>
 
   <div class="text-center py-4">
-    Vandevliet Aerial Shots &copy;&nbsp;<!--# config timefmt="%Y" --><!--# echo var="date_local" -->
+    Vandevliet Aerial Shots &copy;&nbsp;<!--# config timefmt="%Y" --><!--# echo var="date_local" --> &bull;&nbsp;<a href="/privacy">Privacyverklaring</a>
   </div>
 </footer>
\ No newline at end of file
diff --git a/public/includes/nav.html b/public/includes/nav.html
index 5a48451..57beab0 100644
--- a/public/includes/nav.html
+++ b/public/includes/nav.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg fixed-top">
   <div class="container-xxl justify-content-center">
-    <a class="navbar-brand" href="#">
+    <a class="navbar-brand" href="/#">
       <img src="assets/static/logo-aerialshots-v1-w.png" alt="Vandevliet Aerial Shots logo" height="48">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -9,16 +9,16 @@
     <div id="navbarNav" class="collapse navbar-collapse">
       <ul class="navbar-nav text-center">
         <li class="nav-item">
-          <a class="nav-link" href="#section-services">Diensten</a>
+          <a class="nav-link" href="/#section-services">Diensten</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#section-about">Over mij</a>
+          <a class="nav-link" href="/#section-about">Over mij</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#section-wow">Werkwijze</a>
+          <a class="nav-link" href="/#section-wow">Werkwijze</a>
         </li>
         <li class="nav-item">
-          <a class="btn btn-primary" href="#section-contact">Contact</a>
+          <a class="btn btn-primary" href="/#section-contact">Contact</a>
         </li>
       </ul>
     </div>
diff --git a/public/index.html b/public/index.html
index 472b39b..c48c903 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,7 @@
           FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen.<br>
           Let op: deze website alsook de showreel is nog in ontwikkeling.
         </p>
-        <a class="btn btn-primary" href="#section-services">Ontdek meer</a>
+        <p><a class="btn btn-primary" href="#section-services">Ontdek meer</a></p>
       </div>
       <video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
         <source src="assets/static/showreel-sketch.mp4" type="video/mp4">
@@ -27,7 +27,6 @@
 
     <section class="container-xxl">
       <h2 class="section text-center" id="section-services">FPV drone opnames laten maken</h2>
-      <p></p>
       <div class="row text-center">
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
@@ -151,7 +150,6 @@
     <div>
       <section class="container-xxl">
         <h2 class="section text-center" id="section-wow">Werkwijze</h2>
-        <p></p>
         <div class="row text-center">
           <div class="col-sm-6 col-lg">
             <h3>
diff --git a/public/privacy.html b/public/privacy.html
new file mode 100644
index 0000000..9f54a1e
--- /dev/null
+++ b/public/privacy.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="nl" data-bs-theme="dark">
+
+<!--# set var="title" value="Vandevliet Aerial Shots" -->
+<!--# include file="includes/head.html" -->
+
+<body>
+  <header>
+    <!--# include file="includes/nav.html" -->
+  </header>
+
+  <main>
+
+    <section class="container-xxl">
+      <h1>Privacyverklaring</h1>
+      <p>Op deze pagina laat ik je weten welke gegevens ik verzamel wanneer je mijn website gebruikt, waarom ik deze gegevens verzamel en voor hoelang ik deze bewaar. Ik ben niet verantwoordelijk voor de privacyverklaring(en) van derde partijen.</p>
+    </section>
+
+    <section class="container-xxl">
+      <h2>Cookies</h2>
+      <p>Mijn website maakt gebruik van functionele- en analytische cookies, tekstbestandjes die op jouw computer worden geplaatst. Deze helpen mij bij te houden hoe de website wordt gebruikt (zie ook het kopje "Google Analytics"). Mijn website gebruikt echter géén tracking cookies.</p>
+      <p>Je kunt jouw browser zodanig instellen dat cookies worden geweigerd. Het is echter mogelijk dat sommige functies op mijn website dan niet- of onjuist functioneren.</p>
+    </section>
+
+    <section class="container-xxl">
+      <h2>Ingesloten inhoud</h2>
+      <p>Mijn website kan ingesloten (embedded) inhoud van andere websites bevatten (bijvoorbeeld video's, afbeeldingen, berichten, etc.). Ingesloten inhoud van andere websites gedraagt zich exact hetzelfde alsof de bezoeker deze andere website heeft bezocht. Deze websites (bijvoorbeeld Youtube of Instagram) kunnen data over jou verzamelen, cookies gebruiken, tracking van derde partijen insluiten en je interactie met deze ingesloten inhoud monitoren. Voor meer informatie, raadpleeg de privacyverklaring(en) van deze websites.</p>
+    </section>
+
+    <section class="container-xxl">
+      <h2>Google Analytics</h2>
+      <p>Op mijn website maak ik gebruik van Google Analytics om bij te houden hoe bezoekers mijn website gebruiken en op basis daarvan mijn diensten en marketing te blijven verbeteren.</p>
+      <p>De aldus verkregen informatie over jouw gebruik van de website wordt versleuteld en anoniem door Google verwerkt. Ik heb dit zodanig ingesteld dat deze informatie niet langer dan 14 maanden wordt bewaard, tenzij dezelfde gebruiker binnen die termijn de website opnieuw raadpleegd, dan wordt de termijn gereset. Raadpleeg de verklaringen van Google voor meer informatie.</p>
+      <p>Google kan deze informatie aan derden verschaffen indien Google hiertoe wettelijk wordt verplicht, of voor zover deze derden de informatie namens Google verwerken, hier heb ik geen invloed op. Ik heb Google echter géén toestemming gegeven om via deze website verkregen Analytics-informatie te gebruiken voor andere Google-diensten.</p>
+    </section>
+
+    <section class="container-xxl">
+      <h2>Klacht indienen</h2>
+      <p>Indien je van mening bent dat ik jouw privacy niet op de juiste manier waarborg, dan heb je het recht om een klacht in te dienen bij de toezichthouder. In Nederland is dit de Autoriteit Persoonsgegevens. Op <a href="https://www.autoriteitpersoonsgegevens.nl/" target="_blank" rel="noreferrer noopener">autoriteitpersoonsgegevens.nl</a> vindt je alle informatie over hoe je een klacht in kunt dienen.</p>
+    </section>
+
+    <section class="container-xxl">
+      <h2>Veranderingen</h2>
+      <p>Deze privacyverklaring is afgestemd op het doel en het gebruik van- en de mogelijkheden op deze website. Eventuele aanpassingen en/of veranderingen van deze website, kunnen leiden tot wijzigingen in deze privacyverklaring. Het is daarom raadzaam om regelmatig deze privacyverklaring te raadplegen.</p>
+    </section>
+
+  </main>
+
+  <!--# include file="includes/footer.html" -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 5b8551e..e83bc11 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -77,6 +77,24 @@ $primary: $red; // Default: $blue
   font-display: fallback;
 }
 
+main {
+  // @extend .mt-0;
+  // @extend .mb-0;
+  @extend .pb-4;
+  padding-top: 7rem !important;
+}
+
+body.home main {
+  @extend .pt-3;
+}
+
+main>* {
+  // @extend .mt-0;
+  // @extend .mb-0;
+  @extend .pt-4;
+  @extend .pb-3;
+}
+
 ::selection {
   @extend .text-dark;
   background-color: $red-200;
@@ -96,11 +114,6 @@ $primary: $red; // Default: $blue
   transition: opacity 0.2s;
 }
 
-.fa-regular,
-.fa-solid {
-  color: var(--bs-primary);
-}
-
 h1,
 h2 {
   font-family: 'Century Gothic',
@@ -115,6 +128,27 @@ h6 {
   var(--#{$prefix}font-sans-serif);
 }
 
+h1,
+h2 {
+  @extend .mb-0;
+
+  &:not(:first-child) {
+    margin-top: 1.5rem !important;
+  }
+}
+
+h3,
+h4,
+h5,
+h6,
+p {
+  @extend .mb-0;
+
+  &:not(:first-child) {
+    margin-top: 1rem !important;
+  }
+}
+
 h1:hover .anchor-link,
 h2:hover .anchor-link,
 h3:hover .anchor-link,
@@ -150,6 +184,11 @@ h6:hover .anchor-link {
     1px 1px 0 rgba(255, 255, 255, 0.4);
 }
 
+.fa-regular,
+.fa-solid {
+  color: var(--bs-primary);
+}
+
 .navbar {
   background-image: none !important;
   background-color: rgba(22, 23, 25, 0.6) !important;
@@ -182,18 +221,10 @@ body.is-scrolled .navbar {
   height: 100vh;
 }
 
-main {
-  @extend .mt-3;
-}
-
-main>* {
-  @extend .pt-5;
-  @extend .pb-3;
-}
-
 .row {
   margin-top: unset;
-  --bs-gutter-y: var(--bs-gutter-x);
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 1.5rem;
 }
 
 .parallax,