Home page and news page are finished

Gruntfile.js

@@ -0,0 +1,37 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      },
+      build: {
+        src: 'public/js/functions.js',
+        dest: 'public/js/functions.min.js'
+      }
+    },
+    concat: {
+      js: {
+        src: ['resources/assets/js/functions/*.js'],
+        dest: 'public/js/functions.js'
+      }
+    },
+    watch: {
+      scripts: {
+        files: 'resources/assets/js/functions/*.js',
+        tasks: ['concat', 'uglify'],
+        options: {
+          interrupt: true,
+        },
+      },
+    },
+  });
+
+  // Load the plugin that provides the "uglify" task.
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+
+};

app/Console/Kernel.php

@@ -27,39 +27,39 @@ class Kernel extends ConsoleKernel
      */
     protected function schedule(Schedule $schedule)
     {
-//		$this->API_URL = env('API_URL', 'https://api.nhgooi.nl/');
-//
-//		// Update latest news (3 items)
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('laatste_nieuws.json', file_get_contents($this->API_URL . 'nieuws/overzicht?pagina=1&aantal=3'));
-//			Storage::disk('local')->put('populair_nieuws.json', file_get_contents($this->API_URL . 'nieuws/populair'));
-//		})->everyMinute();
-//
-//		// Update now / later
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('nu_straks.json', file_get_contents($this->API_URL . 'programma/schema/nustraks'));
-//			Storage::disk('local')->put('zojuist.json', file_get_contents($this->API_URL . 'programma/schema/recent'));
-//		})->everyMinute();
-//
-//		// Update latest podcasts (6 items)
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('laatste_podcasts.json', file_get_contents($this->API_URL . 'podcast/overzicht?pagina=1&aantal=6'));
-//		})->everyMinute();
-//
-//		// Update calendar items
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('regioagenda.json', file_get_contents($this->API_URL . 'agenda/overzicht'));
-//		})->everyMinute();
-//
-//		// Update blogs
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('blogs.json', file_get_contents($this->API_URL . 'blog/overzicht'));
-//		})->everyMinute();
-//
-//		// Update featured images
-//		$schedule->call(function() {
-//			Storage::disk('local')->put('beelden.json', file_get_contents($this->API_URL . 'beelden/overzicht'));
-//		})->everyMinute();
+		$this->API_URL = env('API_URL', 'https://api.nhgooi.nl/');
+
+		// Update latest news (3 items)
+		$schedule->call(function() {
+			Storage::disk('local')->put('laatste_nieuws.json', file_get_contents($this->API_URL . 'nieuws/overzicht?pagina=1&aantal=3'));
+			Storage::disk('local')->put('populair_nieuws.json', file_get_contents($this->API_URL . 'nieuws/populair'));
+		})->everyMinute();
+
+		// Update now / later
+		$schedule->call(function() {
+			Storage::disk('local')->put('nu_straks.json', file_get_contents($this->API_URL . 'programma/schema/nustraks'));
+			Storage::disk('local')->put('zojuist.json', file_get_contents($this->API_URL . 'programma/schema/recent'));
+		})->everyMinute();
+
+		// Update latest podcasts (6 items)
+		$schedule->call(function() {
+			Storage::disk('local')->put('laatste_podcasts.json', file_get_contents($this->API_URL . 'podcast/overzicht?pagina=1&aantal=6'));
+		})->everyMinute();
+
+		// Update calendar items
+		$schedule->call(function() {
+			Storage::disk('local')->put('regioagenda.json', file_get_contents($this->API_URL . 'agenda/overzicht'));
+		})->everyMinute();
+
+		// Update blogs
+		$schedule->call(function() {
+			Storage::disk('local')->put('blogs.json', file_get_contents($this->API_URL . 'blog/overzicht'));
+		})->everyMinute();
+
+		// Update featured images
+		$schedule->call(function() {
+			Storage::disk('local')->put('beelden.json', file_get_contents($this->API_URL . 'beelden/overzicht'));
+		})->everyMinute();
     }
 
     /**

app/Http/Controllers/NewsController.php

@@ -7,7 +7,8 @@ use \Model\NewsItem;
 
 class NewsController extends Controller
 {
-    private static function TimestampToDateTime($timestamp) {
+    private static function TimestampToDateTime($timestamp)
+    {
         $result = new \DateTime;
         $result->setTimestamp($timestamp);
         return $result;
@@ -19,9 +20,9 @@ class NewsController extends Controller
         $apiResult = $this->API('nieuws/bericht/' . $id);
         $newsItem = new \Model\NewsItem($apiResult->news);
 
-	switch($apiResult->version) {
+        switch ($apiResult->version) {
             case 1:
-if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
+                if (!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
                 return view('newsitem', ['news' => $newsItem, 'metadata' => $newsItem->metadata]);
                 break;
 
@@ -33,13 +34,52 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
                 $newsItem->images = null; // Images will be embedded
                 $newsItem->video = null; // Videos will be embedded
                 $newsItem->content = $source->blocks;
-			return view('newsitem', ['news' => $newsItem, 'metadata' => $newsItem->metadata]);
+
+                $populair = [];
+                $apiResult = $this->API('nieuws/populair?aantal=5');
+                foreach ($apiResult as $_newsItem) {
+                    $populair[] = new \Model\NewsItem($_newsItem);
+                }
+
+                $newsItems = [];
+                $apiResult = $this->API('nieuws/overzicht?aantal=5');
+                foreach ($apiResult->news as $_newsItem) {
+                    $newsItems[] = new \Model\NewsItem($_newsItem);
+                }
+
+                return view('newsitem', ['newsItems' => $newsItems, 'populair' => $populair, 'news' => $newsItem, 'metadata' => $newsItem->metadata]);
         }
     }
 
     public function overview(Request $request)
     {
-        return $this->listNews($request, 'overzicht');
+        return $this->listNews($request, 'overzicht', null, 'items-more-news', 10);
+    }
+
+    public function more(Request $request)
+    {
+        $page = (int)$request->get('pagina', 1);
+        $id = $request->get('id', '');
+        $apiResult = $this->API('nieuws/overzicht?pagina=' . (int)max(1, $page) . '&aantal=5');
+        $news = [];
+        foreach ($apiResult->news as $newsItem) {
+            $news[] = new \Model\NewsItem($newsItem);
+        }
+
+        return view('partial/newslist_small', ['id' => $id, 'news' => $news]);
+    }
+
+    public function populair(Request $request)
+    {
+        $page = (int)$request->get('pagina', 1);
+        $id = $request->get('id', '');
+        $populair = [];
+        $apiResult = $this->API('nieuws/populair?pagina=' . (int)max(1, $page) . '&aantal=5');
+        foreach ($apiResult as $_newsItem) {
+            $populair[] = new \Model\NewsItem($_newsItem);
+        }
+
+        return view('partial/newslist_small', ['id' => $id, 'news' => $populair]);
     }
 
     public function regionlist(Request $request, $region)
@@ -61,9 +101,9 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
     public function activeblog()
     {
         $apiResult = $this->API('blog/overzicht');
-        if(count($apiResult)) {
+        if (count($apiResult)) {
             $blog = new \Model\Blog($apiResult[0]);
-            if($blog->is_active) {
+            if ($blog->is_active) {
                 return redirect($blog->url);
             }
         }
@@ -77,18 +117,16 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
 
         $page = (int)$request->get('pagina', 1);
         $hasNext = true;
-        while($page > 0) {
+        while ($page > 0) {
             $apiResult = $this->API('blog/overzicht/' . (int)$id . '?pagina=' . (int)max(1, $page));
 
             $blog = new \Model\Blog($apiResult->blog);
             $items = [];
-          foreach($apiResult->items as $blogItem)
-          {
+            foreach ($apiResult->items as $blogItem) {
                 $items[] = new \Model\NewsItem($blogItem);
             }
 
-          if(count($items) || ($page == 1)) 
-          {
+            if (count($items) || ($page == 1)) {
                 return view('blog', ['blog' => $blog, 'pagina' => $page, 'items' => $items, 'hasNext' => $hasNext && count($items) == 15]);
             }
 
@@ -99,25 +137,45 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
         return abort(404);
     }
 
-    private function listNews(Request $request, $url, $title = null)
+    private function listNews(Request $request, $url, $title = null, $id = 'items', $total = null)
     {
         $page = (int)$request->get('pagina', 1);
-        $apiResult = $this->API('nieuws/' . $url . '?pagina=' . (int)max(1, $page));
+        $apiResult = $this->API('nieuws/' . $url . '?pagina=' . (int)max(1, $page) . ($total ? '&aantal=' . $total : ''));
         $news = [];
-        foreach($apiResult->news as $newsItem)
-        {
+        foreach ($apiResult->news as $newsItem) {
             $news[] = new \Model\NewsItem($newsItem);
         }
 
-        return view($request->ajax() ? 'partial/newslist_small' : ($title == null ? 'home' : 'newslist'), ['title' => $title, 'news' => $news, 'searchURL' => 'nieuws/zoeken']);
+        $populair = [];
+        if ($url == 'overzicht') {
+            if ($title == null) {
+                $total = 5;
+            }
+            $apiResult = $this->API('nieuws/populair?pagina=' . (int)max(1,
+                    $page) . ($total ? '&aantal=' . $total : ''));
+            foreach ($apiResult as $newsItem) {
+                $populair[] = new \Model\NewsItem($newsItem);
+            }
+        }
+
+        $podcast = null;
+        $podcasts = [];
+        if ($title == null) {
+            $apiResult = $this->API('podcast/overzicht?aantal=3');
+            $podcast = new \Model\Podcast($apiResult->podcasts[0]);
+            foreach ($apiResult->podcasts as $_podcast) {
+                $podcasts[] = new \Model\Podcast($_podcast);
+            }
+        }
+
+        return view($request->ajax() ? ($title == null ? 'partial/home_newslist_small' : 'partial/newslist_small') : ($title == null ? 'home' : 'newslist'), ['populair' => $populair, 'podcasts' => $podcasts, 'podcast' => $podcast, 'id' => $id, 'title' => $title, 'news' => $news, 'searchURL' => 'nieuws/zoeken']);
     }
 
     public function popular()
     {
         $apiResult = $this->API('nieuws/populair');
         $news = [];
-        foreach($apiResult as $newsItem)
-        {
+        foreach ($apiResult as $newsItem) {
             $news[] = new \Model\NewsItem($newsItem);
         }
 
@@ -131,6 +189,6 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
             'title' => 'Regionieuws',
             'content' => 'het laatste nieuws uit de regio',
             'isStream' => false,
-            'canDownload' => true ]);
+            'canDownload' => true]);
     }
 }

package.json

@@ -1,23 +1,14 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "sass-watch": "sass --watch resources/assets/sass:public/css"
+    "sass-watch": "sass --watch resources/assets/sass:public/css",
+    "js-watch": "grunt watch"
   },
   "devDependencies": {
-    "axios": "^0.16.2",
-    "bootstrap": "^5.3.3",
-    "cross-env": "^5.0.1",
-    "jquery": "^3.1.1",
-    "laravel-mix": "^1.0",
-    "lodash": "^4.17.4",
-    "sass": "^1.71.1",
-    "vue": "^2.1.10"
+    "grunt": "^1.6.1",
+    "grunt-contrib-concat": "^2.1.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0",
+    "sass": "^1.71.1"
   }
 }

public/css/style.css

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
 .clearfix::after {
   display: block;
   clear: both;
@@ -11,12 +13,40 @@
   margin: 0 auto;
 }
 
+.body_container {
+  padding: 67px 135px;
+  background-color: #f9f9f9;
+  margin: 0;
+}
+
+.btn {
+  display: block;
+  width: calc(100% - 78px);
+  padding: 10px 39px 10px 39px;
+  border-radius: 3px;
+  background-image: linear-gradient(to right, #0f259d, #5ba8f4);
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 0.93;
+  text-align: center;
+  color: #fff;
+  margin-bottom: 10px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+.btn.auto_width {
+  width: fit-content;
+  margin: 0 auto;
+}
+
 .header {
   height: 110px;
 }
 
 .header .logo {
   margin-left: 135px;
+  float: left;
 }
 
 .header .logo img {
@@ -29,20 +59,25 @@
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 }
 .menu_container .menu {
-  list-style-type: none;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  list-style: none;
   overflow: hidden;
   position: relative;
   z-index: 0;
+  margin: 0px -1px;
 }
-.menu_container .menu li {
+.menu_container .menu > li {
   float: left;
+  margin: 0px -1px;
 }
-.menu_container .menu li ul {
+.menu_container .menu > li.has_submenu {
+  position: relative;
+}
+.menu_container .menu > li ul {
   display: none;
 }
-.menu_container .menu li a {
+.menu_container .menu > li a {
   display: block;
   font-family: Nunito, serif;
   color: #1a1a1a;
@@ -53,12 +88,12 @@
   text-decoration: none;
   background: white;
 }
-.menu_container .menu li.selected a, .menu_container .menu li:hover a {
+.menu_container .menu > li.selected a, .menu_container .menu > li:hover a, .menu_container .menu > li.hover a {
   color: white;
   background: transparent;
   position: relative;
 }
-.menu_container .menu li.selected a:before, .menu_container .menu li:hover a:before {
+.menu_container .menu > li.selected a:before, .menu_container .menu > li:hover a:before, .menu_container .menu > li.hover a:before {
   content: "";
   display: block;
   width: 33px;
@@ -69,27 +104,27 @@
   left: 0;
   z-index: 1;
 }
-.menu_container .menu li.selected a:after, .menu_container .menu li:hover a:after {
+.menu_container .menu > li.selected a:after, .menu_container .menu > li:hover a:after, .menu_container .menu > li.hover a:after {
   content: "";
   display: block;
-  width: 10px;
-  height: 12px;
+  width: 12px;
+  height: 15px;
   background-image: URL("/images/menu-corner-2.svg");
   position: absolute;
   bottom: 0;
   right: -1px;
   z-index: 1;
 }
-.menu_container .menu li:first-child {
+.menu_container .menu > li:first-child {
   width: 135px;
   display: block;
   background: white;
-  height: 25px;
+  height: 29px;
 }
-.menu_container .menu li:last-child {
+.menu_container .menu > li:last-child {
   margin-left: 10px;
 }
-.menu_container .menu li:last-child:after {
+.menu_container .menu > li:last-child:after {
   content: " ";
   z-index: -1;
   background: white;
@@ -103,6 +138,104 @@
 .top_menu_container {
   height: 50px;
 }
+.top_menu_container ul {
+  float: right;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.top_menu_container ul li {
+  float: left;
+  padding: 6px 19px;
+  margin: 8px;
+  border-right: 1px solid #fff;
+}
+.top_menu_container ul li:last-child {
+  border: none;
+}
+.top_menu_container ul li a {
+  float: left;
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: right;
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+.top_menu_container ul li a i {
+  font-size: 18px;
+  position: relative;
+  top: 2px;
+  margin-left: 5px;
+}
+.top_menu_container ul li .search_form {
+  float: left;
+  overflow: hidden;
+  height: 21px;
+  margin-right: 10px;
+}
+
+.menu-submenu {
+  position: absolute;
+}
+.menu-submenu > a {
+  display: block;
+  height: 30px;
+}
+.menu-submenu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.menu-submenu ul a {
+  display: block;
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #1a1a1a;
+  text-decoration: none;
+  padding: 15px 0;
+  border-bottom: 1px solid #f8f8f8;
+}
+.menu-submenu > ul {
+  padding: 20px;
+  border-radius: 3px;
+  box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+  background-color: #fff;
+  margin-left: 20px;
+  width: max-content;
+  display: none;
+}
+.menu-submenu > ul li ul {
+  display: none;
+}
+.menu-submenu > ul li ul li {
+  padding-left: 10px;
+}
+.menu-submenu > ul li.has_submenu {
+  position: relative;
+}
+.menu-submenu > ul li.has_submenu:after {
+  -webkit-font-smoothing: antialiased;
+  display: var(--fa-display, inline-block);
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-rendering: auto;
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  content: "\f0d7";
+  position: absolute;
+  right: 0;
+  top: 15px;
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.menu-submenu > ul li.has_submenu.opened:after {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
 .header .now-playing-header {
   float: right;
@@ -138,10 +271,13 @@
   padding: 3px;
   width: 100%;
 }
-.now-playing-header .controls li {
+.now-playing-header .controls ul {
+  margin: 0;
+}
+.now-playing-header .controls ul li {
   display: inline-block;
 }
-.now-playing-header .controls li a {
+.now-playing-header .controls ul li a {
   line-height: 120%;
   font-size: 80%;
   color: #ABABAB;
@@ -150,13 +286,603 @@
   margin-left: 5px;
   margin-right: 5px;
 }
-
-.blog_grid img {
-  max-width: 100%;
+.now-playing-header .controls ul li a label {
+  cursor: pointer;
 }
+
 .blog_grid .row, .blog_grid .row > * {
   padding: 0;
   margin: 0;
 }
+.blog_grid .row {
+  height: 100%;
+}
+.blog_grid .post {
+  position: relative;
+  height: 100%;
+}
+.blog_grid .post img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: brightness(50%);
+}
+.blog_grid .post.small {
+  height: 50%;
+}
+.blog_grid .post .slider_content_box {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+}
+.blog_grid .post .slider_content_box .post_details {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.blog_grid .post .slider_content_box .post_details .category a {
+  padding: 6px 11px 7px;
+  border-radius: 3px;
+  background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
+  font-family: Nunito, serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+.blog_grid .post .slider_content_box h2, .blog_grid .post .slider_content_box h5 {
+  margin: 15px 0 0 0;
+}
+.blog_grid .post .slider_content_box h2 a, .blog_grid .post .slider_content_box h5 a {
+  font-family: Montserrat, serif;
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-decoration: none;
+}
+.blog_grid .post .slider_content_box h5 a {
+  font-size: 16px;
+  line-height: 1.17;
+}
+.blog_grid .post .slider_content_box .post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.box_header {
+  border-bottom: 1px solid #efefef;
+}
+.box_header span {
+  font-family: Nunito, serif;
+  font-size: 20px;
+  font-weight: bold;
+  color: #0f259d;
+  border-bottom: 3px solid #0f259d;
+  display: inline-block;
+  text-transform: uppercase;
+  height: 30px;
+}
+
+.box {
+  display: inline-block;
+  width: auto;
+  padding: 30px 23px 30px 30px;
+  border-radius: 3px;
+  box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+  background-color: #fff;
+  margin-bottom: 50px;
+}
+.box.full-width {
+  width: calc(100% - 60px);
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+}
+.tabs .box_header span {
+  color: #999;
+  border-bottom: none;
+  cursor: pointer;
+}
+.tabs .box_header.small span {
+  font-size: 13px;
+}
+.tabs .box_header.medium span {
+  font-size: 18px;
+}
+.tabs .box_header.active span, .tabs .box_header:hover span {
+  color: #0f259d;
+  border-bottom: 3px solid #0f259d;
+}
+
+.tab_content {
+  display: none;
+}
+.tab_content.active {
+  display: block;
+}
+
+.blog {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.blog .post {
+  margin-bottom: 27px;
+}
+.blog .post img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.blog .post h2 {
+  margin: 0;
+}
+.blog .post h2 a {
+  font-family: Montserrat, serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.43;
+  color: #1a1a1a;
+  text-decoration: none;
+  display: inline-block;
+}
+.blog .post .col-8 {
+  padding: 0;
+}
+.blog .post .post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sidebar .box {
+  width: calc(100% - 38px);
+}
+
+.radio_box {
+  padding: 15px 23px 15px 15px;
+  width: calc(100% - 38px);
+}
+.radio_box h2 {
+  font-family: Montserrat, serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: #1a1a1a;
+}
+.radio_box .post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.radio_box p {
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.57;
+  text-align: left;
+  color: #666;
+}
+
+.contact_box {
+  position: relative;
+}
+.contact_box .logo-whatsapp {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.contact_box h2 {
+  font-family: Montserrat, serif;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.17;
+  color: #282828;
+  margin-top: 0;
+  padding-right: 60px;
+}
+.contact_box p {
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.57;
+  color: #666;
+}
+.contact_box .read_more {
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.57;
+  color: #0f259d;
+  text-transform: uppercase;
+}
+
+.featured img {
+  width: 100%;
+}
+.featured h2 {
+  margin: 0;
+}
+.featured h2 a {
+  font-family: Montserrat, serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: left;
+  color: #1a1a1a;
+  text-decoration: none;
+}
+.featured .sub_title {
+  width: 100%;
+  display: flex;
+}
+.featured .sub_title .program_name {
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: left;
+  color: #000;
+  margin-right: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.featured .sub_title .post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.featured p {
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.57;
+  text-align: left;
+  color: #666;
+  margin: 10px 0;
+}
+
+.podcast_items ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.podcast_items ul li {
+  margin-bottom: 25px;
+}
+.podcast_items ul li h2 {
+  margin: 0;
+}
+.podcast_items ul li h2 a {
+  font-family: Montserrat, serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.43;
+  text-align: left;
+  color: #1a1a1a;
+  text-decoration: none;
+}
+.podcast_items ul li .sub_title {
+  width: 100%;
+  display: flex;
+}
+.podcast_items ul li .sub_title .program_name {
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: left;
+  color: #000;
+  margin-right: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.podcast_items ul li .sub_title .post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.post_container {
+  padding: 40px 135px;
+  background-color: #f9f9f9;
+  margin: 0;
+}
+.post_container > .col-8 {
+  width: calc(66.66666667% - 50px);
+  margin-right: 50px;
+}
+.post_container .bread_crumb {
+  height: 38px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-bottom: 1px solid #efefef;
+  padding-bottom: 18px;
+}
+.post_container .bread_crumb li {
+  float: left;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: left;
+  color: #666;
+  margin-right: 5px;
+}
+.post_container .bread_crumb li a {
+  color: #666;
+  text-decoration: none;
+}
+.post_container .bread_crumb li i {
+  font-size: 8px;
+}
+.post_container .post_tags {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: 31px;
+  margin-top: 20px;
+}
+.post_container .post_tags li {
+  float: left;
+  margin-right: 10px;
+}
+.post_container .post_tags li a {
+  display: block;
+  padding: 6px 15px 7px;
+  border-radius: 3px;
+  background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+  font-family: Nunito, serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+.post_container h1 {
+  margin: 17px 0;
+  font-family: Montserrat, serif;
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 1.15;
+  text-align: left;
+  color: #282828;
+}
+.post_container .post_body {
+  width: 100%;
+  font-family: Nunito, serif;
+  font-size: 15px;
+  line-height: 1.6;
+  color: #282828;
+}
+.post_container .post_body h3 {
+  font-size: 15px;
+}
+.post_container .post_body .sentence {
+  font-size: 12px;
+  font-style: italic;
+  line-height: 3.17;
+  text-align: right;
+  color: #585858;
+  display: block;
+  width: 100%;
+}
+.post_container .post_body .sentence span {
+  padding: 0 5px;
+}
+.post_container .post_body blockquote {
+  border-left: 3px solid #5ba8f4;
+  margin-left: 0;
+  padding-left: 20px;
+  font-family: Lato, serif;
+  font-size: 30px;
+  font-style: italic;
+  line-height: 1.27;
+  color: #5ba8f4;
+}
+.post_container .post_body blockquote .author {
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 3.17;
+  color: #585858;
+}
+.post_container .post_body .post_details {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.post_container .post_body .post_details li {
+  float: left;
+  margin-right: 10px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  color: #666;
+}
+.post_container .post_body .post_details li a {
+  color: #666;
+  text-decoration: none;
+}
+.post_container .post_body .post_details li i {
+  margin-right: 4px;
+}
+.post_container .post_body .post_image img, .post_container .post_body video, .post_container .post_body .mejs__video {
+  width: calc(100% + 53px);
+  margin: 0 -23px 0 -30px;
+}
+.post_container .post_body .mejs__video, .post_container .post_body video {
+  width: calc(100% + 53px) !important;
+}
+.post_container .info {
+  padding: 1em;
+  color: #3E3E3E;
+  line-height: 150%;
+  border-radius: 10px;
+  margin: 1em;
+}
+.post_container .info h2 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-top: 3px;
+  clear: both;
+}
+.post_container .info a {
+  color: #ED1C24;
+}
+
+.footer_container {
+  font-family: Montserrat, serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.71;
+  text-align: left;
+  color: #fff;
+}
+.footer_container .footer_menu {
+  padding: 61px 135px 38px 134px;
+  background-image: linear-gradient(to right, #0102b0, #4090e3);
+}
+.footer_container .footer_menu .row:first-child {
+  padding-bottom: 70px;
+  margin-bottom: 34px;
+  border-bottom: 1px solid #fff;
+}
+.footer_container .footer_menu a {
+  color: #fff;
+  text-decoration: none;
+  display: block;
+  width: 100%;
+}
+.footer_container .footer_menu .buttons a {
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+.footer_container .footer_menu .box_header {
+  border-bottom: 1px solid #fff;
+}
+.footer_container .footer_menu .box_header span {
+  border-bottom: 3px solid #fff;
+  color: #fff;
+  font-size: 14px;
+}
+.footer_container .copyright {
+  padding: 20px;
+  background-color: #0f259d;
+  text-align: center;
+  position: relative;
+}
+.footer_container .copyright .scroll_top {
+  position: absolute;
+  right: 30px;
+  top: -19px;
+  width: 38px;
+  height: 38px;
+  background-color: #5ba8f4;
+  color: #fff;
+  text-decoration: none;
+  line-height: 40px;
+  border-radius: 5px;
+}
+.footer_container .footer_menu2 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.footer_container .footer_menu2 li {
+  float: left;
+  margin-right: 40px;
+}
+.footer_container .footer_menu2 li a {
+  text-decoration: underline;
+}
+.footer_container .footer_social_media {
+  float: right;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.footer_container .footer_social_media li {
+  float: left;
+  margin: 4px;
+}
+.footer_container .footer_social_media li a {
+  display: block;
+  width: 34px;
+  height: 34px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 37px;
+}
+.footer_container .footer_social_media li a.facebook {
+  background-color: #0f259d;
+}
+.footer_container .footer_social_media li a.twitter-x {
+  background-color: #5ba8f4;
+}
+.footer_container .footer_social_media li a.youtube {
+  background-color: #e73323;
+}
 
 /*# sourceMappingURL=style.css.map */

public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../resources/assets/sass/abstracts/_fonts.scss","../../resources/assets/sass/base/_clearfix.scss","../../resources/assets/sass/base/_container.scss","../../resources/assets/sass/components/_header.scss","../../resources/assets/sass/components/_menu.scss","../../resources/assets/sass/abstracts/_variables.scss","../../resources/assets/sass/components/_now-playing.scss","../../resources/assets/sass/components/_main_news.scss"],"names":[],"mappings":";AAAQ;ACAR;EACE;EACA;EACA;;;ACHF;EACE;EACA;;;ACFF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACLF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA,OCeS;EDdT,aCeU;EDdV,WCeQ;EDdR;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EACE;;;AEzFF;EACE;;;AAEF;EACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5CN;EACE;;AAEF;EACE;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../../resources/assets/sass/abstracts/_fonts.scss","../../resources/assets/sass/base/_clearfix.scss","../../resources/assets/sass/base/_container.scss","../../resources/assets/sass/components/_button.scss","../../resources/assets/sass/components/_header.scss","../../resources/assets/sass/components/_menu.scss","../../resources/assets/sass/abstracts/_mixin.scss","../../resources/assets/sass/abstracts/_variables.scss","../../resources/assets/sass/components/_now-playing.scss","../../resources/assets/sass/components/_main_news.scss","../../resources/assets/sass/components/_box.scss","../../resources/assets/sass/components/_blog.scss","../../resources/assets/sass/components/_sidebar.scss","../../resources/assets/sass/components/_radio_box.scss","../../resources/assets/sass/components/_contact_box.scss","../../resources/assets/sass/components/_featured.scss","../../resources/assets/sass/components/_podcast_items.scss","../../resources/assets/sass/components/_post.scss","../../resources/assets/sass/components/_footer.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;ACFR;EACE;EACA;EACA;;;ACHF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AClBJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACLF;EACE;EACA;EACA;;AAEA;ECLA;EACA;EACA;EDKE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA,OEUS;EFTT,aEUU;EFTV,WEUQ;EFTR;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EACE;;AAEA;EACE;EC9FF;EACA;EACA;;AD+FE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;;AAGF;EC/IA;EACA;EACA;;AD+IE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AACA;EACE;;AAIN;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AGrMR;EACE;;;AAEF;EACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC/CV;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EAEA;;AAEA;EH/BJ;EACA;EACA;;AGgCM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OFdiB;EEejB;;AAEF;EACE;EACA;;AAEF;EH1DJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EGiDM,OFvBiB;;;AG7CzB;EAWE;;AAVA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;;AAEE;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;;AAKR;EACE;;AACA;EACE;;;ACrDJ;ELCE;EACA;EACA;;AKAA;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;ELvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AMnBF;EACE;;;ACCF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EPNA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOAA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvBJ;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;ERLA;EACA;EACA;EACA;EACA;EACA;;;ASzBA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;ET2BA;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ASIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3BF;EVAA;EACA;EACA;;AUCE;EACE;;AACA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EVwBJ;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AWlBF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EXTF;EACA;EACA;EWSE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIN;EXlCA;EACA;EACA;EWkCE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EXhHF;EACA;EACA;;AWiHI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAKN;EACE;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AC5JN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EZ5DA;EACA;EACA;;AY6DE;EACE;EACA;;AAEA;EACE;;AAKN;EACE;EZ1EF;EACA;EACA;;AY2EE;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE","file":"style.css"}

public/js/functions.js

@@ -0,0 +1,134 @@
+(function ($) {
+   /**
+   * @param {object} _options
+   */
+  $.fn.loadMoreNews = function (_options) {
+    var nextPage = 2;
+    var isLoading = false;
+    var page = 1;
+    var options = {
+      loadingElementId: '#loading',
+      container: '',
+      url: document.location.pathname
+    };
+
+    $.extend(options, _options);
+    var $isLoading = $(options.loadingElementId, this);
+    $isLoading.hide();
+
+    this.click(function (e) {
+      e.preventDefault();
+      if (!isLoading) {
+        // Set flag and update UI
+        isLoading = 1;
+        $isLoading.show();
+        var $button = $(this).attr("disabled", "disabled");
+        var $container = $(options.container)
+
+        // Fire request for the next page
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
+          .always(function () {
+            // Whether success or failure, update the UI again
+            isLoading = 0;
+            $isLoading.hide();
+            $button.removeAttr("disabled");
+          })
+          .done(function (data) {
+            if (!data) {
+              // When no data was returned, disable the button permanently
+              page = -1;
+              $button.attr("disabled", "disabled").text("Geen nieuws meer.");
+              return;
+            }
+
+            $container.each(function () {
+              var id = this.toString();
+              $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
+            });
+            ++nextPage;
+          });
+      }
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-loadmorenews]').each(function () {
+    $(this).loadMoreNews($(this).data('loadmorenews'));
+  });
+});
+
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.menu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $menus = $(this).children('.' + options.menuSubmenuClass);
+    var $container = $(this);
+
+    $menus.on( "mouseenter", function () {
+      var $menuItem = $(this);
+      $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+      $('.hover', $container).removeClass('hover');
+      $menuItem.addClass('hover');
+      var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
+      var pos = $menuItem.offset();
+      submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
+      submenu.on( "mouseleave", function(){
+        $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+        $menuItem.removeClass('hover');
+      } );
+      $('body').append(submenu);
+      submenu.children('ul.submenu').slideDown();
+
+      submenu.find('ul.submenu li.has_submenu').click(function(){
+        $(this).find('ul.submenu').slideToggle();
+        $(this).toggleClass('opened');
+      });
+      openPlayerInNewScreen();
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('.menu, .mobile-menu').menu({});
+});
+
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.tabs = function (_options) {
+    var options = {
+      tabClass: 'box_header',
+      activeClass: 'active',
+      contentClass: 'tab_content'
+    };
+    $.extend(options, _options);
+    var $tabs = $(this).find('.' + options.tabClass);
+    var $container = $(this);
+
+    $tabs.click(function (e) {
+      e.preventDefault();
+      $tabs.removeClass(options.activeClass);
+      $container.find('.' + options.contentClass).removeClass(options.activeClass);
+      $container.find('#' + $(this).data('tab-content-id')).addClass(options.activeClass);
+      $(this).addClass(options.activeClass);
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-tabs]').each(function () {
+    $(this).tabs($(this).data('tabs') ?? {});
+  });
+});

public/js/functions.min.js

@@ -0,0 +1,2 @@
+/*!  2024-03-13 */
+!function(o){o.fn.loadMoreNews=function(e){var a=2,n=!1,i={loadingElementId:"#loading",container:"",url:document.location.pathname},u=(o.extend(i,e),o(i.loadingElementId,this));u.hide(),this.click(function(e){var t,s;e.preventDefault(),n||(n=1,u.show(),t=o(this).attr("disabled","disabled"),s=o(i.container),o.ajax({url:i.url+(0<=i.url.indexOf("?")?"&":"?")+"pagina="+a}).always(function(){n=0,u.hide(),t.removeAttr("disabled")}).done(function(n){n?(s.each(function(){var e=this.toString();o(e).append(o("<div>"+n+"</div>").find(e).length?o("<div>"+n+"</div>").find(e).children():o(n))}),++a):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(a){a.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(a.extend(n,e),a(this).children("."+n.menuSubmenuClass)),s=a(this);e.on("mouseenter",function(){var e=a(this),n=(a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),a(".hover",s).removeClass("hover"),e.addClass("hover"),a('<div style="width: '+e.outerWidth()+'px"><a href="'+e.find("a").attr("href")+'" style="width: '+e.outerWidth()+'px"></a></div>').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),a("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu li.has_submenu").click(function(){a(this).find("ul.submenu").slideToggle(),a(this).toggleClass("opened")}),openPlayerInNewScreen()})}}(jQuery),$(function(){$(".menu, .mobile-menu").menu({})}),function(a){a.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(a.extend(n,e),a(this).find("."+n.tabClass)),s=a(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),s.find("."+n.contentClass).removeClass(n.activeClass),s.find("#"+a(this).data("tab-content-id")).addClass(n.activeClass),a(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})});

public/js/main.js

@@ -0,0 +1,41 @@
+function loadMoreNews(e, _options) {
+  var options = $.extend( {
+    loadingElementId: '#loading'
+  }, _options );
+  window.loadMoreNews = window.loadMoreNewsSettings ?? {}
+  var nextPage = window.loadMoreNewsSettings.nextPage ?? 2;
+  var isLoading = window.loadMoreNewsSettings.isLoading ?? false;
+  var $isLoading = $(options.loadingElementId).hide();
+
+  e.preventDefault();
+
+  if (!isLoading) {
+    // Set flag and update UI
+    isLoading = 1;
+    $isLoading.show();
+    var $button = $(this).attr("disabled", "disabled");
+
+    // Fire request for the next page
+    $.ajax({url: document.location.pathname + '?pagina=' + nextPage})
+      .always(function () {
+        // Whether success or failure, update the UI again
+        isLoading = 0;
+        $isLoading.hide();
+        $button.removeAttr("disabled");
+      })
+      .done(function (data) {
+        if (!data) {
+          // When no data was returned, disable the button permanently
+          page = -1;
+          $button.attr("disabled", "disabled").text("Geen nieuws meer.");
+          return;
+        }
+        console.log($(data));
+        console.log($(data).find('#items-more-news'));
+
+        $('#items-more-news').append($(data).find('#items-more-news'));
+        $('#items-most-read').append($(data).find('#items-most-read'));
+        ++nextPage;
+      });
+  }
+}

resources/assets/js/functions/loadMoreNews.js

@@ -0,0 +1,60 @@
+(function ($) {
+   /**
+   * @param {object} _options
+   */
+  $.fn.loadMoreNews = function (_options) {
+    var nextPage = 2;
+    var isLoading = false;
+    var page = 1;
+    var options = {
+      loadingElementId: '#loading',
+      container: '',
+      url: document.location.pathname
+    };
+
+    $.extend(options, _options);
+    var $isLoading = $(options.loadingElementId, this);
+    $isLoading.hide();
+
+    this.click(function (e) {
+      e.preventDefault();
+      if (!isLoading) {
+        // Set flag and update UI
+        isLoading = 1;
+        $isLoading.show();
+        var $button = $(this).attr("disabled", "disabled");
+        var $container = $(options.container)
+
+        // Fire request for the next page
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
+          .always(function () {
+            // Whether success or failure, update the UI again
+            isLoading = 0;
+            $isLoading.hide();
+            $button.removeAttr("disabled");
+          })
+          .done(function (data) {
+            if (!data) {
+              // When no data was returned, disable the button permanently
+              page = -1;
+              $button.attr("disabled", "disabled").text("Geen nieuws meer.");
+              return;
+            }
+
+            $container.each(function () {
+              var id = this.toString();
+              $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
+            });
+            ++nextPage;
+          });
+      }
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-loadmorenews]').each(function () {
+    $(this).loadMoreNews($(this).data('loadmorenews'));
+  });
+});

resources/assets/js/functions/menu.js

@@ -0,0 +1,41 @@
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.menu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $menus = $(this).children('.' + options.menuSubmenuClass);
+    var $container = $(this);
+
+    $menus.on( "mouseenter", function () {
+      var $menuItem = $(this);
+      $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+      $('.hover', $container).removeClass('hover');
+      $menuItem.addClass('hover');
+      var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
+      var pos = $menuItem.offset();
+      submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
+      submenu.on( "mouseleave", function(){
+        $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+        $menuItem.removeClass('hover');
+      } );
+      $('body').append(submenu);
+      submenu.children('ul.submenu').slideDown();
+
+      submenu.find('ul.submenu li.has_submenu').click(function(){
+        $(this).find('ul.submenu').slideToggle();
+        $(this).toggleClass('opened');
+      });
+      openPlayerInNewScreen();
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('.menu, .mobile-menu').menu({});
+});

resources/assets/js/functions/tabs.js

@@ -0,0 +1,31 @@
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.tabs = function (_options) {
+    var options = {
+      tabClass: 'box_header',
+      activeClass: 'active',
+      contentClass: 'tab_content'
+    };
+    $.extend(options, _options);
+    var $tabs = $(this).find('.' + options.tabClass);
+    var $container = $(this);
+
+    $tabs.click(function (e) {
+      e.preventDefault();
+      $tabs.removeClass(options.activeClass);
+      $container.find('.' + options.contentClass).removeClass(options.activeClass);
+      $container.find('#' + $(this).data('tab-content-id')).addClass(options.activeClass);
+      $(this).addClass(options.activeClass);
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-tabs]').each(function () {
+    $(this).tabs($(this).data('tabs') ?? {});
+  });
+});

resources/assets/sass/abstracts/_fonts.scss

@@ -1 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap')

resources/assets/sass/abstracts/_mixin.scss

@@ -0,0 +1,55 @@
+@use "variables" as *;
+
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+@mixin post_date {
+  display: block;
+  height: 30px;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
+  color: #666;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@mixin read_more_link {
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.57;
+  color: #0f259d;
+  text-transform: uppercase;
+}
+
+@mixin program_name {
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: left;
+  color: #000;
+  margin-right: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@mixin sub_title {
+  width: 100%;
+  display: flex;
+  .program_name {
+    @include program_name;
+  }
+  .post_date {
+    @include post_date;
+  }
+}

resources/assets/sass/abstracts/_variables.scss

@@ -41,3 +41,6 @@ $panel-default-heading-bg: #fff;
 $nav-text-color: #1a1a1a;
 $nav-text-weight: bold;
 $nav-text-size: 14px;
+
+// News
+$news-banner-text-color: #fff;

resources/assets/sass/base/_base.scss

@@ -1,6 +1,6 @@
 @use "../abstracts/fonts";
 @use "clearfix";
 @use "container";
+@use "../components/button";
 
-@use "../layout/header";
-@use "../components/main_news";
+@use "../layout";

resources/assets/sass/base/_container.scss

@@ -2,3 +2,8 @@
   max-width: 1440px;
   margin: 0 auto;
 }
+.body_container {
+  padding: 67px 135px;
+  background-color: #f9f9f9;
+  margin: 0;
+}

resources/assets/sass/components/_blog.scss

@@ -0,0 +1,36 @@
+@use "../abstracts/mixin" as *;
+
+.blog {
+  @include reset-list;
+
+  .post {
+    margin-bottom: 27px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    h2 {
+      margin: 0;
+
+      a {
+        font-family: Montserrat, serif;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.43;
+        color: #1a1a1a;
+        text-decoration: none;
+        display: inline-block;
+      }
+    }
+
+    .col-8 {
+      padding: 0;
+    }
+
+    .post_date {
+      @include post_date;
+    }
+  }
+}

resources/assets/sass/components/_box.scss

@@ -0,0 +1,58 @@
+.box_header {
+  span {
+    font-family: Nunito, serif;
+    font-size: 20px;
+    font-weight: bold;
+    color: #0f259d;
+    border-bottom: 3px solid #0f259d;
+    display: inline-block;
+    text-transform: uppercase;
+    height: 30px;
+  }
+  border-bottom: 1px solid #efefef;
+}
+.box {
+  display: inline-block;
+  width: auto;
+  padding: 30px 23px 30px 30px;
+  border-radius: 3px;
+  box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+  background-color: #fff;
+  margin-bottom: 50px;
+
+  &.full-width {
+    width: CALC(100% - 60px);
+  }
+}
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  .box_header {
+    span {
+      color: #999;
+      border-bottom: none;
+      cursor: pointer;
+    }
+
+    &.small span {
+      font-size: 13px;
+    }
+
+    &.medium span {
+      font-size: 18px;
+    }
+
+    &.active, &:hover {
+      span {
+        color: #0f259d;
+        border-bottom: 3px solid #0f259d;
+      }
+    }
+  }
+}
+.tab_content {
+  display: none;
+  &.active {
+    display: block;
+  }
+}

resources/assets/sass/components/_button.scss

@@ -0,0 +1,21 @@
+.btn {
+  display: block;
+  width: CALC(100% - 78px);
+  padding: 10px 39px 10px 39px;
+  border-radius: 3px;
+  background-image: linear-gradient(to right, #0f259d, #5ba8f4);
+  font-family: Nunito, serif;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 0.93;
+  text-align: center;
+  color: #fff;
+  margin-bottom: 10px;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &.auto_width {
+    width: fit-content;
+    margin: 0 auto;
+  }
+}

resources/assets/sass/components/_contact_box.scss

@@ -0,0 +1,32 @@
+@use "../abstracts/mixin" as *;
+
+.contact_box {
+  position: relative;
+  .logo-whatsapp {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  h2 {
+    font-family: Montserrat, serif;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.17;
+    color: #282828;
+    margin-top: 0;
+    padding-right: 60px;
+  }
+
+  p {
+    font-family: Nunito, serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.57;
+    color: #666;
+  }
+
+  .read_more {
+    @include read_more_link;
+  }
+}

resources/assets/sass/components/_featured.scss

@@ -0,0 +1,33 @@
+@use "../abstracts/mixin" as *;
+
+.featured {
+  img {
+    width: 100%;
+  }
+  h2 {
+    margin: 0;
+    a {
+      font-family: Montserrat, serif;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.35;
+      text-align: left;
+      color: #1a1a1a;
+      text-decoration: none;
+    }
+  }
+
+  .sub_title {
+    @include sub_title;
+  }
+
+  p {
+    font-family: Nunito, serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.57;
+    text-align: left;
+    color: #666;
+    margin: 10px 0;
+  }
+}

resources/assets/sass/components/_footer.scss

@@ -0,0 +1,105 @@
+@use "../abstracts/mixin" as *;
+
+.footer_container {
+  font-family: Montserrat, serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.71;
+  text-align: left;
+  color: #fff;
+
+  .footer_menu {
+    padding: 61px 135px 38px 134px;
+    background-image: linear-gradient(to right, #0102b0, #4090e3);
+
+    .row:first-child {
+      padding-bottom: 70px;
+      margin-bottom: 34px;
+      border-bottom: 1px solid #fff;
+    }
+
+    a {
+      color: #fff;
+      text-decoration: none;
+      display: block;
+      width: 100%;
+    }
+
+    .buttons a {
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+
+    .box_header {
+      border-bottom: 1px solid #fff;
+
+      span {
+        border-bottom: 3px solid #fff;
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .copyright {
+    padding: 20px;
+    background-color: #0f259d;
+    text-align: center;
+    position: relative;
+
+    .scroll_top {
+      position: absolute;
+      right: 30px;
+      top: -19px;
+      width: 38px;
+      height: 38px;
+      background-color: #5ba8f4;
+      color: #fff;
+      text-decoration: none;
+      line-height: 40px;
+      border-radius: 5px;
+    }
+  }
+
+  .footer_menu2 {
+    @include reset-list;
+
+    li {
+      float: left;
+      margin-right: 40px;
+
+      a {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .footer_social_media {
+    float: right;
+    @include reset-list;
+
+    li {
+      float: left;
+      margin: 4px;
+
+      a {
+        display: block;
+        width: 34px;
+        height: 34px;
+        border-radius: 5px;
+        text-align: center;
+        line-height: 37px;
+
+        &.facebook {
+          background-color: #0f259d;
+        }
+        &.twitter-x {
+          background-color: #5ba8f4;
+        }
+        &.youtube {
+          background-color: #e73323;
+        }
+      }
+    }
+  }
+}

resources/assets/sass/components/_header.scss

@@ -3,6 +3,7 @@
 }
 .header .logo {
   margin-left: 135px;
+  float: left;
 }
 .header .logo img {
   height: 75px;

resources/assets/sass/components/_main_news.scss

@@ -1,9 +1,73 @@
+@use "../abstracts/mixin" as *;
+@use "../abstracts/variables" as *;
+
 .blog_grid {
-  img {
-    max-width: 100%;
-  }
   .row, .row > * {
     padding: 0;
     margin: 0;
   }
+  .row {
+    height: 100%;
+  }
+  .post {
+    position: relative;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: brightness(50%);
+    }
+
+    &.small {
+      height: 50%;
+    }
+
+    .slider_content_box {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      padding: 15px;
+
+      .post_details {
+        @include reset-list;
+
+        .category a {
+          padding: 6px 11px 7px;
+          border-radius: 3px;
+          background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
+          font-family: Nunito, serif;
+          font-size: 10px;
+          font-weight: bold;
+          text-align: center;
+          color: $news-banner-text-color;
+          text-decoration: none;
+          text-transform: uppercase;
+        }
+      }
+
+      h2, h5 {
+        margin: 15px 0 0 0;
+      }
+      h2 a, h5 a {
+        font-family: Montserrat, serif;
+        font-size: 30px;
+        font-weight: 600;
+        line-height: 1;
+        color: $news-banner-text-color;
+        text-decoration: none;
+      }
+      h5 a {
+        font-size: 16px;
+        line-height: 1.17;
+      }
+      .post_date {
+        @include post_date;
+        color: $news-banner-text-color;
+      }
+    }
+  }
 }

resources/assets/sass/components/_menu.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/variables" as *;
+@use "../abstracts/mixin" as *;
 
 .menu_container {
   height: 75px;
@@ -6,15 +7,19 @@
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 
   .menu {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
+    @include reset-list;
     overflow: hidden;
     position: relative;
     z-index: 0;
+    margin: 0px -1px;
 
-    li {
+    > li {
       float: left;
+      margin: 0px -1px;
+
+      &.has_submenu {
+        position: relative;
+      }
 
       ul {
         display: none;
@@ -32,7 +37,7 @@
         background: white;
       }
 
-      &.selected a, &:hover a {
+      &.selected a, &:hover a, &.hover a {
         color: white;
         background: transparent;
         position: relative;
@@ -52,8 +57,8 @@
         &:after {
           content: '';
           display: block;
-          width: 10px;
-          height: 12px;
+          width: 12px;
+          height: 15px;
           background-image: URL('/images/menu-corner-2.svg');
           position: absolute;
           bottom: 0;
@@ -66,7 +71,7 @@
         width: 135px;
         display: block;
         background: white;
-        height: 25px;
+        height: 29px;
       }
 
       &:last-child {
@@ -88,4 +93,110 @@
 }
 .top_menu_container {
   height: 50px;
+
+  ul {
+    float: right;
+    @include reset-list;
+
+    li {
+      float: left;
+      padding: 6px 19px;
+      margin: 8px;
+      border-right: 1px solid #fff;
+
+      &:last-child {
+        border: none;
+      }
+
+      a {
+        float: left;
+        font-family: Nunito, serif;
+        font-size: 14px;
+        font-weight: bold;
+        text-align: right;
+        color: #fff;
+        text-decoration: none;
+        text-transform: uppercase;
+
+        i {
+          font-size: 18px;
+          position: relative;
+          top: 2px;
+          margin-left: 5px;
+        }
+      }
+
+      .search_form {
+        float: left;
+        overflow: hidden;
+        height: 21px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.menu-submenu {
+  position: absolute;
+
+  > a {
+    display: block;
+    height: 30px;
+  }
+
+  ul {
+    @include reset-list;
+    a {
+      display: block;
+      font-family: Nunito, serif;
+      font-size: 14px;
+      font-weight: bold;
+      color: #1a1a1a;
+      text-decoration: none;
+      padding: 15px 0;
+      border-bottom: 1px solid #f8f8f8;
+    }
+  }
+
+  > ul {
+    padding: 20px;
+    border-radius: 3px;
+    box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+    background-color: #fff;
+    margin-left: 20px;
+    width: max-content;
+    display: none;
+
+    li {
+      ul {
+        display: none;
+        li {
+          padding-left: 10px;
+        }
+      }
+    }
+    li.has_submenu {
+      position: relative;
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f0d7";
+        position: absolute;
+        right: 0;
+        top: 15px;
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &.opened:after {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+    }
+  }
 }

resources/assets/sass/components/_now-playing.scss

@@ -33,6 +33,9 @@
     padding: 3px;
     width: 100%;
 
+    ul {
+      margin: 0;
+
       li {
         display: inline-block;
 
@@ -44,6 +47,11 @@
           padding: 4px;
           margin-left: 5px;
           margin-right: 5px;
+
+          label {
+            cursor: pointer;
+          }
+        }
       }
     }
   }

resources/assets/sass/components/_podcast_items.scss

@@ -0,0 +1,28 @@
+@use "../abstracts/mixin" as *;
+
+.podcast_items {
+  ul {
+    @include reset-list;
+
+    li {
+      margin-bottom: 25px;
+      h2 {
+        margin: 0;
+
+        a {
+          font-family: Montserrat, serif;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 1.43;
+          text-align: left;
+          color: #1a1a1a;
+          text-decoration: none;
+        }
+      }
+
+      .sub_title {
+        @include sub_title;
+      }
+    }
+  }
+}

resources/assets/sass/components/_post.scss

@@ -0,0 +1,162 @@
+@use "../abstracts/mixin" as *;
+.post_container {
+  padding: 40px 135px;
+  background-color: #f9f9f9;
+  margin: 0;
+
+  > .col-8 {
+    width: CALC(66.66666667% - 50px);
+    margin-right: 50px;
+  }
+
+  .bread_crumb {
+    height: 38px;
+    @include reset-list;
+    border-bottom: 1px solid #efefef;
+    padding-bottom: 18px;
+
+    li {
+      float: left;
+      font-family: Nunito, serif;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 3.17;
+      text-align: left;
+      color: #666;
+      margin-right: 5px;
+
+      a {
+        color: #666;
+        text-decoration: none;
+      }
+
+      i {
+        font-size: 8px;
+      }
+    }
+  }
+  .post_tags {
+    @include reset-list;
+    height: 31px;
+    margin-top: 20px;
+
+    li {
+      float: left;
+      margin-right: 10px;
+
+      a {
+        display: block;
+        padding: 6px 15px 7px;
+        border-radius: 3px;
+        background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+        font-family: Nunito, serif;
+        font-size: 10px;
+        font-weight: bold;
+        text-align: center;
+        color: #fff;
+        text-decoration: none;
+        text-transform: uppercase;
+      }
+    }
+  }
+  h1 {
+    margin: 17px 0;
+    font-family: Montserrat, serif;
+    font-size: 40px;
+    font-weight: 600;
+    line-height: 1.15;
+    text-align: left;
+    color: #282828;
+  }
+  .post_body {
+    width: 100%;
+
+    font-family: Nunito, serif;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #282828;
+
+    h3 {
+      font-size: 15px;
+    }
+
+    .sentence {
+      font-size: 12px;
+      font-style: italic;
+      line-height: 3.17;
+      text-align: right;
+      color: #585858;
+      display: block;
+      width: 100%;
+
+      span {
+        padding: 0 5px;
+      }
+    }
+
+    blockquote {
+      border-left: 3px solid #5ba8f4;
+      margin-left: 0;
+      padding-left: 20px;
+      font-family: Lato, serif;
+      font-size: 30px;
+      font-style: italic;
+      line-height: 1.27;
+      color: #5ba8f4;
+
+      .author {
+        font-family: Nunito, serif;
+        font-size: 12px;
+        font-style: normal;
+        line-height: 3.17;
+        color: #585858;
+      }
+    }
+
+    .post_details {
+      @include reset-list;
+
+      li {
+        float: left;
+        margin-right: 10px;
+        font-family: Nunito, serif;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 3.17;
+        color: #666;
+        a {
+          color: #666;
+          text-decoration: none;
+        }
+        i {
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .post_image img, video, .mejs__video {
+      width: CALC(100% + 53px);
+      margin: 0 -23px 0 -30px;
+    }
+    .mejs__video, video {
+      width: CALC(100% + 53px) !important;
+    }
+  }
+
+  .info {
+    padding: 1em;
+    color: #3E3E3E;
+    line-height: 150%;
+    border-radius: 10px;
+    margin: 1em;
+    h2 {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-top: 3px;
+      clear: both;
+    }
+    a {
+      color: #ED1C24;
+    }
+  }
+}

resources/assets/sass/components/_radio_box.scss

@@ -0,0 +1,28 @@
+@use "../abstracts/mixin" as *;
+
+.radio_box {
+  padding: 15px 23px 15px 15px;
+  width: CALC(100% - 38px);
+
+  h2 {
+    font-family: Montserrat, serif;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: #1a1a1a;
+  }
+
+  .post_date {
+    @include post_date;
+  }
+
+
+  p {
+    font-family: Nunito, serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.57;
+    text-align: left;
+    color: #666;
+  }
+}

resources/assets/sass/components/_sidebar.scss

@@ -0,0 +1,3 @@
+.sidebar .box {
+  width: CALC(100% - 38px);
+}

resources/assets/sass/layout/_footer.scss

@@ -0,0 +1 @@
+@use "../components/footer";

resources/assets/sass/layout/_home.scss

@@ -0,0 +1,8 @@
+@use "../components/main_news";
+@use "../components/box";
+@use "../components/blog";
+@use "../components/sidebar";
+@use "../components/radio_box";
+@use "../components/contact_box";
+@use "../components/featured";
+@use "../components/podcast_items";

resources/assets/sass/layout/_index.scss

@@ -0,0 +1,5 @@
+@forward 'header';
+@forward 'home';
+@forward 'news_post';
+@forward 'post';
+@forward 'footer';

resources/assets/sass/layout/_news_post.scss

@@ -0,0 +1 @@
+@use "../components/news_post";

resources/assets/sass/layout/_post.scss

@@ -0,0 +1 @@
+@use "../components/post";

resources/views/home.blade.php

@@ -15,7 +15,7 @@
                     {{-- Desktop --}}
                     <div class="grid_view">
                         <div class="row">
-							<div class="col-8">
+                            <div class="col-6">
                                 @if($item = current($news))
                                     <div class="post large">
                                         <a href="{{url($item->url)}}" title="{{$item->title}}">
@@ -24,22 +24,37 @@
                                             @elseif($item->images && count($item->images) > 1)
                                                 <span class="icon gallery"></span>
                                             @endif
-										<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                                            <img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
+                                                 alt='img'>
                                         </a>
                                         <div class="slider_content_box">
                                             <ul class="post_details simple">
                                                 @if($item->region)
                                                     <li class="category">
-												<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}" class="over_image">{{$item->region->title}}</a>
+                                                        <a title="Regio: {{$item->region->title}}"
+                                                           href="{{route('nieuws.regio', ['region' => $item->region->slug])}}"
+                                                           class="over_image">{{$item->region->title}}</a>
                                                     </li>
                                                 @endif
                                             </ul>
-										<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h2>
+                                            <h2><a href="{{url($item->url)}}"
+                                                   title="{{$item->title}}">{!!$item->title!!}</a></h2>
+                                                <?php
+                                                $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
+                                                if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
+                                                    $time .= ' | bijgewerkt: '
+                                                        . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
+                                                        . ' ' . $item->edited->format('H:i') . ' uur';
+                                                }
+                                                ?>
+                                            <span class="post_date" title="{{$time}}">
+                                                <i class="fa-regular fa-clock"></i> {{$time}}
+                                            </span>
                                         </div>
                                     </div>
                                 @endif
                             </div>
-							<div class="col-4">
+                            <div class="col-6">
                                 <div class="row">
                                     @for($i = 0; ($i < 4) && ($item = next($news)); ++$i)
                                         <div class="post small col-6">
@@ -49,17 +64,32 @@
                                                 @elseif($item->images && count($item->images) > 1)
                                                     <span class="icon gallery"></span>
                                                 @endif
-											<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                                                <img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
+                                                     alt='img'>
                                             </a>
                                             <div class="slider_content_box">
                                                 <ul class="post_details simple">
                                                     @if($item->region)
                                                         <li class="category">
-													<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}" class="over_image">{{$item->region->title}}</a>
+                                                            <a title="Regio: {{$item->region->title}}"
+                                                               href="{{route('nieuws.regio', ['region' => $item->region->slug])}}"
+                                                               class="over_image">{{$item->region->title}}</a>
                                                         </li>
                                                     @endif
                                                 </ul>
-											<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h5>
+                                                <h5><a href="{{url($item->url)}}"
+                                                       title="{{$item->title}}">{!!$item->title!!}</a></h5>
+                                                    <?php
+                                                    $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
+                                                    if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
+                                                        $time .= ' | bijgewerkt: '
+                                                            . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
+                                                            . ' ' . $item->edited->format('H:i') . ' uur';
+                                                    }
+                                                    ?>
+                                                <span class="post_date" title="{{$time}}">
+                                                    <i class="fa-regular fa-clock"></i> {{$time}}
+                                                </span>
                                             </div>
                                         </div>
                                     @endfor
@@ -67,152 +97,98 @@
                             </div>
                         </div>
                     </div>
-					{{-- Mobile --}}
-					<div class="slider_view">
-						<div class="caroufredsel_wrapper caroufredsel_wrapper_slider">
-							<ul class="slider id-small_slider">
-								@foreach($news as $item)
-								@if($loop->index > 3) @break @endif
-								<li class="slide">
-									<a href="{{url($item->url)}}" title="{{$item->title}}">
-										@if($item->video)
-										<span class="icon video"></span>
-										@elseif($item->images && count($item->images) > 1)
-										<span class="icon gallery"></span>
-										@endif
-										<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
-									</a>
-									<div class="slider_content_box">
-										<ul class="post_details simple">
-											@if($item->region)
-											<li class="category">
-												<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
-											</li>
-											@endif
-										</ul>
-											<h2 style="display:none;"><a href="{{url($item->url)}}" title="{{$item->title}}">{{Formatter::excerpt($item->title, 50)}}</a></h2>
-										<h5><a href="{{url($item->url)}}" title="sfd">{!!$item->title!!}</a></h5>
-
-									</div>
-								</li>
-								@endforeach
-							</ul>
-						</div>
-						<div id="small_slider" class='slider_posts_list_container small'>
-						</div>
-					</div>
                 </div>
             </div>
         </div>
 
-		{{-- Meer nieuws --}}
-		<div class="row page_margin_top">
-			<div class="column column_2_3">
-				<h4 class="box_header">Meer nieuws</h4>
-				@foreach(array_slice($news, 4, 2) as $item)
-					@if($loop->index % 2 == 0)
+        {{-- body --}}
+        <div class="row body_container">
+            <div class="col-md-9 col-12">
                 <div class="row">
-					@endif
-						<div class="column column_1_2">
-							<ul class="blog">
-								<li class="post">
-									<a href="{{url($item->url)}}" title="{{$item->title}}">
-										@if($item->video)
-										<span class="icon video"></span>
-										@elseif($item->images && count($item->images) > 1)
-										<span class="icon gallery"></span>
-										@endif
-										<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                    <div class="col-md-6 col-12">
+                        <h4 class="box_header"><span>Meer nieuws</span></h4>
+                        <div class="box">
+                            @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => array_slice($news, 5, 5)])
+                        </div>
+                    </div>
+
+                    <div class="col-md-6 col-12">
+                        <h4 class="box_header"><span>Meest gelezen</span></h4>
+                        <div class="box">
+                            @include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
+                        </div>
+                    </div>
+                </div>
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <a class="btn auto_width" id="meer-nieuws" href="#"
+                           data-loadmorenews='{"container":["#items-more-news", "#items-most-read"]}'>
+                            <span class="fas fa-spinner fa-spin" id="loading"></span>
+                            Klik hier voor meer nieuws
                         </a>
-									<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h2>
-									<ul class="post_details">
-										@if($item->region)
-										<li class="category">
-											<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
-										</li>
-										@endif
-										@if($item->theme)
-										<li class="category">
-											<a title="Thema: {{$item->theme->title}}" href="{{url('nieuws/thema/' . $item->theme->slug)}}">{{$item->theme->title}}</a>
-										</li>
-										@endif
-36										@if($item->edited && ($item->edited != $item->published))
-										<li class="date edited">
-											Bijgewerkt
-											@if($item->edited->format('d m') != $item->published->format('d m'))
-											op {{Formatter::relativeDate($item->edited)}}
-											@endif
-											om {{$item->edited->format('H:i')}} uur
-										</li>
-										@else
-										<li class="date">
-											{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} uur
-										</li>
-										@endif
-									</ul>
-									<p>{{Formatter::excerpt($item->content, 150)}}</p>
-									<a class="read_more" href="{{url($item->url)}}" title="Lees verder"><span class="arrow"></span><span>Lees verder...</span></a>
-								</li>
-							</ul>
-						</div>
-					@if($loop->index % 2 == 1)
-					</div>
-					@endif
-				@endforeach
-
-				<div id="items">
-					@include('partial/newslist_small', ['news' => array_slice($news, 6, count($news))])
-				</div>
-
-				<div>
-					<button class="more page_margin_top" type="button" id='meer-nieuws'>
-						<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
-						LAAD MEER NIEUWSBERICHTEN
-					</button>
                     </div>
                 </div>
+                <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
+                    - Advertentie -
+                </div>
+                <div style="width: 100%;height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
 
-			<div class="column column_1_3">
-				@include('widgets.banners')
-
-				{{--
-				<h4 class="box_header"><span class="fa fa-fire"></span> &nbsp; Meest gelezen</h4>
-				@include('widgets.populairnieuws')
-				--}}
-
-				@include('widgets.nustraks')
-
-				<h4 class="page_margin_top box_header"><span class="fa fa-history"></span> &nbsp; Iets gemist?</h4>
-				<p><a class="more" href="{{route('gemist.fragment')}}">Fragment gemist</a>
-				<a class="more" style="margin-top: 2px;" href="{{route('gemist.programma')}}">Programma terugluisteren</a></p>
-
-				@if(!$title)
-				<h4 class="page_margin_top box_header"><span class="fa fa-tag"></span> &nbsp; Recente berichten</h4>
-				<?php
-					$regions = [];
-					$themes = [];
-					foreach($news as $item) {
-						if($item->region) $regions[$item->region->slug] = $item->region->title;
-						if($item->theme) $themes[$item->theme->slug] = $item->theme->title;
-					}
-				?>
-
-				<ul class="taxonomies clearfix page_margin_top">
-				@foreach($regions as $slug => $title)
-					<li><a href="{{route('nieuws.regio', $slug)}}" title="Meer nieuws uit regio {{$title}}"><span class="fa fa-map-marker"></span> Uit {{$title}}</a></li>
-				@endforeach
-				@foreach($themes as $slug => $title)
-					<li class="active"><a href="{{route('nieuws.thema', $slug)}}" title="Meer nieuws met thema {{$title}}"><span class="fa fa-tag"></span> Over {{$title}}</a></li>
-				@endforeach
-				</ul>
+                @if ($podcast)
+                        <?php $url = route('gemist.fragment') . $podcast->url; ?>
+                    <h4 class="box_header"><span>Uitgelicht</span></h4>
+                    <div class="box featured">
+                        <div class="row">
+                            <div class="col-6">
+                                <a href="{{$url}}" title="{{$podcast->title}}">
+                                    <img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/>
+                                </a>
+                            </div>
+                            <div class="col-6">
+                                <h2><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
+                                <div class="sub_title">
+                                    @if ($podcast->program)
+                                        <a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
+                                           title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
                                     @endif
+                                    <span class="post_date" title="{{Formatter::relativeDate($podcast->created)}}">
+                                    <i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($podcast->created)}}
+                                </span>
+                                </div>
+                                <p>
+                                    {!!$podcast->content!!}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            <div class="col-md-3 col-12 sidebar">
+                @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
+
+                @include('widgets/contact', [])
+
+                <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
+                    - Advertentie -
+                </div>
+                <div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
+
+                <div class="podcast_items">
+                    <h4 class="box_header"><span>Fragment gemist</span></h4>
+                    <div class="box">
+                        @include('partial/podcastitems', ['showTime' => false, 'showImage' => false, 'podcasts' => $podcasts])
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 @endsection
 
 @section('oud')
-  @if($title) <h2> <a href="{{route('nieuws')}}" title="Terug naar het nieuwsoverzicht" class="btn btn-primary"><i class="icon-arrow-small-left"></i></a> {{$title}} </h2> @endif
+    @if($title)
+        <h2><a href="{{route('nieuws')}}" title="Terug naar het nieuwsoverzicht" class="btn btn-primary"><i
+                        class="icon-arrow-small-left"></i></a> {{$title}} </h2>
+    @endif
 
     <section class="page-content col-lg-8 col-md-12">
         <div id="items">
@@ -221,7 +197,8 @@
 
         <div id="loading" style="display: none">
             <div class="progress progress-striped active">
-        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
+                     style="width: 100%">
                     <b>Meer nieuwsberichten ophalen...</b>
                 </div>
             </div>
@@ -229,41 +206,3 @@
     </section>
 @endsection
 
-@push('scripts')
-<script>
-	var nextPage = 2;
-	var isLoading = 0;
-	var $isLoading = $('#loading').hide();
-
-	$('#meer-nieuws').click(function(e) {
-		e.preventDefault();
-		if(!isLoading) {
-			// Set flag and update UI
-			isLoading = 1;
-			$isLoading.show();
-			var $button = $(this).attr("disabled", "disabled");
-
-			// Fire request for the next page
-			$.ajax({ url: document.location.pathname + '?pagina=' + nextPage })
-				.always(function() {
-					// Whether success or failure, update the UI again
-					isLoading = 0;
-					$isLoading.hide();
-					$button.removeAttr("disabled");
-				})
-				.done(function(data) {
-					if(!data) {
-						// When no data was returned, disable the button permanently
-						page = -1;
-						$button.attr("disabled", "disabled").text("Geen nieuws meer.");
-						return;
-					}
-
-					$('#items').append(data);
-					++nextPage;
-				});
-		}
-	});
-</script>
-@endpush
-

resources/views/layouts/_head.blade.php

@@ -22,6 +22,7 @@
 		<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
 		<link rel="stylesheet" type="text/css" href="/css/nhgooi.css">-->
 		<link rel="stylesheet" type="text/css" href="/css/bootstrap-grid.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 		<link rel="stylesheet" type="text/css" href="/css/style.css">
 		<meta property="fb:app_id" content="133349980094758" />
 		<meta property="og:site_name" content="NH Gooi" />
@@ -37,4 +38,22 @@
 		<!--rss-->
 		<link rel="alternate" type="application/rss+xml" title="Abonneren op NH Gooi Nieuws" href="{{env('API_URL')}}rss/nieuws" />
 		<link rel="alternate" type="application/rss+xml" title="Abonneren op NH Gooi Fragment gemist" href="{{env('API_URL')}}rss/podcasts" />
+		<script>
+			refreshCSS = () => {
+				let links = document.getElementsByTagName('link');
+				for (let i = 0; i < links.length; i++) {
+					if (links[i].getAttribute('rel') == 'stylesheet') {
+						let href = links[i].getAttribute('href')
+								.split('?')[0];
+						if (href == '/css/style.css') {
+
+							let newHref = href + '?version='
+									+ new Date().getMilliseconds();
+
+							links[i].setAttribute('href', newHref);
+						}
+					}
+				}
+			}
+		</script>
 	</head>

resources/views/layouts/master.blade.php

@@ -1,216 +1,25 @@
 @section('page')
-	@yield('content')
+@yield('content')
 @endsection
-<!DOCTYPE html>
+        <!DOCTYPE html>
 <html>
-	@include('layouts._head')
-	<body>
+@include('layouts._head')
+<body>
+<button style="position: fixed; top: 0; left: 0;display: none" onclick="refreshCSS()">Refresh</button>
 <!-- Google Tag Manager (noscript) -->
 
-              <noscript>
-                <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGLKLJ4" height="0" width="0" style="display:none; visibility:hidden"></iframe></noscript>
-               <!-- End Google Tag Manager (noscript) -->
-		<div class="site_container boxed">
+<noscript>
+    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGLKLJ4" height="0" width="0"
+            style="display:none; visibility:hidden"></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->
+<div class="site_container boxed">
     <div class="header_top_bar_container style_11 clearfix">
-{{--
-				<div class="header_top_bar">
-					<form class="search">
-						<input type="text" name="s" placeholder="Search..." value="Search..." class="search_input hint">
-						<input type="submit" class="search_submit" value="">
-						<input type="hidden" name="page" value="search">
-					</form>
-					<!--<ul class="social_icons dark clearfix">
-					<ul class="social_icons colors clearfix">-->
-					<ul class="social_icons clearfix">
-						<li>
-							<a target="_blank" href="http://facebook.com/QuanticaLabs" class="social_icon facebook" title="facebook">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a target="_blank" href="https://twitter.com/QuanticaLabs" class="social_icon twitter" title="twitter">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a href="mailto:contact@pressroom.com" class="social_icon mail" title="mail">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a href="http://themeforest.net/user/QuanticaLabs/portfolio" class="social_icon envato" title="envato">
-								&nbsp;
-							</a>
-						</li>
-						<!--<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon behance">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon bing">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon blogger">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon deezer">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon designfloat">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon deviantart">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon digg">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon dribbble">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon flickr">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon form">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon forrst">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon foursquare">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon friendfeed">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon googleplus">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon instagram">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon linkedin">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon mobile">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon myspace">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon picasa">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon pinterest">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon reddit">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon rss">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon skype">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon soundcloud">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon spotify">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon stumbleupon">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon technorati">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon tumblr">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon vimeo">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-						a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon wykop">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon xing">
-								&nbsp;
-							</a>
-						</li>
-						<li>
-							<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon youtube">
-								&nbsp;
-							</a>
-						</li>-->
-					</ul>
-					@include('widgets.laatstenieuws')
-				</div>
---}}
     </div>
     <div class="header_container small">
         <div class="header clearfix">
             <div class="logo">
-						<a href="{{url('/')}}"><img src="/images/logo.png" class="ri" /></a>
+                <a href="{{url('/')}}"><img src="/images/logo.png" class="ri"/></a>
             </div>
 
             <div class="now-playing-header">
@@ -220,25 +29,25 @@
                     <ul>
                         <li class="program-link">
                             <a href='{{route('radio.gids')}}' title="Bekijk het huidige programma in de programmagids">
-										<span class="fa fa-info"></span>
+                                <i class="fa-solid fa-info"></i>
                                 <label>Programmagids</label>
                             </a>
                         </li>
                         <li class="listen-live">
                             <a href='{{route('luister.live')}}' title="Luister live naar NH Gooi Radio" class="player">
-										<span class="fa fa-play"></span>
+                                <i class="fa-solid fa-play"></i>
                                 <label>Luister NH Gooi Radio</label>
                             </a>
                         </li>
                         <li class="watch-live">
                             <a href='{{route('kijk.live')}}' title="Kijk live naar NH Gooi TV">
-										<span class="fa fa-tv"></span>
+                                <i class="fa-solid fa-tv"></i>
                                 <label>Kijk NH Gooi TV</label>
                             </a>
                         </li>
                         <li class="watch-studio">
                             <a href='{{route('kijk.studio')}}' title="Kijk live mee in de radiostudio van NH Gooi">
-										<span class="fa fa-video"></span>
+                                <i class="fa-solid fa-video"></i>
                                 <label>Studiocam</label>
                             </a>
                         </li>
@@ -248,170 +57,138 @@
         </div>
     </div>
     <div class="menu_container sticky clearfix">
-				<div class="top_menu_container"></div>
-				@include('widgets.menu')
+        <div class="top_menu_container">
+            <ul>
+                <li>
+                    <a href="/">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
+                </li>
                 @if(isset($searchURL))
-				<form class="search d-none" action="{{url($searchURL)}}">
-					<input type="text" name="query" placeholder="Zoeken..." value="{{isset($query) ? $query : null}}" class="search_input hint">
+                    <li>
+                        <form class="search_form" action="{{url($searchURL)}}">
+                            <input type="text" name="query" placeholder="Zoeken..."
+                                   value="{{isset($query) ? $query : null}}" class="search_input hint">
                             <input type="submit" class="search_submit" value="Zoeken">
                         </form>
+                        <a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i
+                                    style="display: none" class="fa-solid fa-xmark"></i></a>
+                    </li>
                 @endif
+            </ul>
+        </div>
+        @include('widgets.menu')
     </div>
 
-<!-- Content -->
+    <!-- Content -->
 
-<div class="page">
+    <div class="page">
         <a name="top"></a>
         @if($activeBlog != null)
             <p style="float: left; border: solid 1px #1f3977; border-radius: 10px; padding: 0 10px 0.4em 10px; margin: 10px 0 10px 0; width: 100%;">
                 <b>Live-blog:</b> {{$activeBlog->title}}
-		<a href="{{$activeBlog->url}}" class="action_button" style="float: none; margin-left: 1em;"><span class="fa fa-rss"></span><span>Volg het live-blog</span></a>
+                <a href="{{$activeBlog->url}}" class="action_button" style="float: none; margin-left: 1em;"><span
+                            class="fa fa-rss"></span><span>Volg het live-blog</span></a>
             </p>
         @endif
         @yield('page')
-</div><!--/.page-->
+    </div><!--/.page-->
 
-<a class="scroll_top_floater" href="#top" title="Scroll naar boven"></a>
+    <a class="scroll_top_floater" href="#top" title="Scroll naar boven"></a>
 
-<!-- Footer -->
+    <!-- Footer -->
     <div class="footer_container">
-				<div class="footer clearfix>
+        <div class="footer_menu">
             <div class="row">
-						<div class="column column_1_3">
-							<h4 class="box_header">NH Gooi</h4>
-							<p class="padding_top_bottom_25">
+                <div class="col-3">
+                    <h4 class="box_header"><span>NH Gooi</span></h4>
+                    <p class="about">
                         <b>NH Gooi</b> is de streekomroep voor het Gooi in samenwerking met NH Media.
                         NH Gooi Radio hoor je in heel Gooi en Eemland op 92.0 FM.
                         <a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
                     </p>
+                </div>
+                <div class="col-3">
+                    <h4 class="box_header"><span>Contact</span></h4>
+                    <p class="buttons">
+                        <a href="/">Contactgegevens</a>
+                        <a href="/">Klachtenregeling</a>
+                        <a href="/">Frequenties</a>
+                        <a href="/">Adverteren</a>
+                        <a href="/">NH Nieuws</a>
+                    </p>
+                </div>
+                <div class="col-3">
+                    <h4 class="box_header"><span>Kijk & luister</span></h4>
+                    <p class="buttons">
+                        <a href="/">Luister live</a>
+                        <a href="/">Kijk live</a>
+                        <a href="/">Uitgelichte video’s</a>
+                        <a href="/">Gemist</a>
+                        <a href="/">Nieuws</a>
+                    </p>
+                </div>
+                <div class="col-3">
+                    <h4 class="box_header"><span>Radio</span></h4>
+                    <p class="buttons">
+                        <a href="/">Programmagids</a>
+                        <a href="/">Programma’s</a>
+                        <a href="/">Podcasts</a>
+                    </p>
+                </div>
+            </div>
             <div class="row">
-								<div class="column column_1_2">
-									<h5>Bezoekadres / Studio</h5>
-									<p>
-									IJsselmeerstraat 3B <br/>
-									1271 AA, Huizen <br/>
-									Tel: 	035-6424774 <br/>
-									Studio: 	035-6424776 <br/>
-									E-mail: 	info@nhgooi.nl <br/>
-									KvK: 	41194132
-									</p>
-								</div>
-								<div class="column column_1_2">
-									<h5>Postadres</h5>
-									<p>
-									Postbus 83 <br/>
-									1270 AB  Huizen <br/>
-									</p>
-								</div>
-							</div>
-							<a href="#" id="changePreferences">Pas hier uw cookie-instellingen aan</a>
-							{{--
-							<h4 class="box_header page_margin_top">Get In Touch With Us</h4>
-							<ul class="social_icons dark page_margin_top clearfix">
-								<li>
-									<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a title="" href="#" class="social_icon skype">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a title="" href="#" class="social_icon instagram">
-										&nbsp;
-									</a>
-								</li>
-								<li>
-									<a title="" href="#" class="social_icon pinterest">
-										&nbsp;
-									</a>
-								</li>
+                <div class="col-12">
+                    <ul class="footer_menu2">
+                        <li>Logo</li>
+                        <li><a href="/">Disclaimer</a></li>
+                        <li><a href="/">Privacy verklaring</a></li>
+                        <li><a href="/">Cookie statement</a></li>
                     </ul>
-							--}}
-						</div>
-						<div class="column column_1_3">
-							<h4 class="box_header">Fragment gemist</h4>
-							@include("widgets.laatstepodcasts")
-						</div>
-						<div class="column column_1_3">
-							<h4 class="box_header">Regio-agenda</h4>
-							@include("widgets.regioagenda")
-						</div>
-					</div>
-					<div class="row page_margin_top_section">
-						<div class="column column_1_4">
-							<a class="scroll_top" href="#top" title="Scroll to top">Top</a>
-						</div>
-					</div>
-					<div class="row copyright_row">
-						<div class="column column_2_3">
-							&copy; Copyright <?php echo date('Y'); ?> NH Gooi. <a href="http://quanticalabs.com" title="QuanticaLabs" target="_blank">QuanticaLabs</a> - PressRoom Template.
-						</div>
-						{{--
-						<div class="column column_1_3">
-							<ul class="footer_menu">
-								<li>
-									<h6><a href="?page=about" title="About">About</a></h6>
+                    <ul class="footer_social_media">
+                        <li><a class="facebook" title="Facebook" href="/"><i class="fa-brands fa-facebook-f"></i></a>
                         </li>
-								<li>
-									<h6><a href="?page=authors" title="Authors">Authors</a></h6>
-								</li>
-								<li>
-									<h6><a href="?page=contact" title="Contact Us">Contact Us</a></h6>
+                        <li><a class="twitter-x" title="Twitter/X" href="/"><i class="fa-brands fa-twitter"></i></a>
                         </li>
+                        <li><a class="youtube" title="Youtube" href="/"><i class="fa-brands fa-youtube"></i></a></li>
                     </ul>
                 </div>
-						--}}
             </div>
         </div>
+        <div class="copyright">
+            © NH Gooi
+            <a class="scroll_top" href="#top" title="Scroll to top"><i class="fa-solid fa-angle-up"></i></a>
         </div>
     </div>
-		<div class="background_overlay"></div>
-		<!--js-->
-		<!--<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
-		<script type="text/javascript" src="/js/jquery-migrate-1.4.1.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.ba-bbq.min.js"></script>
-		<script type="text/javascript" src="/js/jquery-ui-1.11.1.custom.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
-		<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
-		<script type="text/javascript" src="/js/jquery.touchSwipe.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.sliderControl.js"></script>
-		<script type="text/javascript" src="/js/jquery.timeago.js"></script>
-		<script type="text/javascript" src="/js/jquery.hint.js"></script>
-		<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
-		<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
-		<script type="text/javascript" src="/js/jquery.blockUI.js"></script>
-		<script type="text/javascript" src="/js/main.js"></script>
-		<script type="text/javascript" src="/js/odometer.min.js"></script>-->
-		<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
-		<script type="text/javascript">
-			$(window).resize(function() {
+</div>
+<div class="background_overlay"></div>
+<!--js-->
+<!--<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
+<script type="text/javascript" src="/js/jquery-migrate-1.4.1.min.js"></script>
+<script type="text/javascript" src="/js/jquery.ba-bbq.min.js"></script>
+<script type="text/javascript" src="/js/jquery-ui-1.11.1.custom.min.js"></script>
+<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
+<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
+<script type="text/javascript" src="/js/jquery.touchSwipe.min.js"></script>
+<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
+<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
+<script type="text/javascript" src="/js/jquery.sliderControl.js"></script>
+<script type="text/javascript" src="/js/jquery.timeago.js"></script>
+<script type="text/javascript" src="/js/jquery.hint.js"></script>
+<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
+<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
+<script type="text/javascript" src="/js/jquery.blockUI.js"></script>
+<script type="text/javascript" src="/js/main.js"></script>
+<script type="text/javascript" src="/js/odometer.min.js"></script>-->
+<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
+<script type="text/javascript" src="/js/functions.js"></script>
+<script type="text/javascript">
+  $(window).resize(function () {
     // Fix sticky for mobile menu indicator
     menu_position = $(".menu_container").offset().top;
   });
 
-			$(window).scroll(function() {
+  $(window).scroll(function () {
     var topOfWindow = $(window).scrollTop();
-				if(topOfWindow > menu_position) $(".scroll_top_floater").fadeIn();
+    if (topOfWindow > menu_position) $(".scroll_top_floater").fadeIn();
     else $(".scroll_top_floater").fadeOut();
   });
   $(".scroll_top_floater").hide();
@@ -419,7 +196,7 @@
   function updateOnAir() {
     $.ajax({
       url: '{{route('onair')}}',
-					success: function(data) {
+      success: function (data) {
         $(document).trigger('onAirUpdated', data);
       }
     });
@@ -437,10 +214,10 @@
     programLabel: $(".now-playing-header .program-link a > label"),
     first: true
   };
-			$(document).on('onAirUpdated', function(evt, data) {
-				if(data.inProgram) {
+  $(document).on('onAirUpdated', function (evt, data) {
+    if (data.inProgram) {
       $nowPlaying.title.text(data.program.name).attr('title', data.program.name);
-					if(data.current && data.current.title) {
+      if (data.current && data.current.title) {
         $nowPlaying.artist.text((data.current.artist ? data.current.artist + ' - ' : '') + data.current.title);
       } else {
         $nowPlaying.artist.text(data.program.tagline);
@@ -452,9 +229,11 @@
     }
     $nowPlaying.studiocam.toggle(data.stream != false);
     $nowPlaying.programLink.attr('href', '{{route("programma")}}' + data.program.url);
-				if($nowPlaying.first) { $nowPlaying.controls.hide(); }
-				$nowPlaying.container.slideDown(function() {
-					if($nowPlaying.first) {
+    if ($nowPlaying.first) {
+      $nowPlaying.controls.hide();
+    }
+    $nowPlaying.container.slideDown(function () {
+      if ($nowPlaying.first) {
         $nowPlaying.controls.fadeIn('slow');
         $nowPlaying.first = false;
       }
@@ -463,12 +242,24 @@
     // Now playing may have moved the menu
     menu_position = $(".menu_container").offset().top;
   });
-			$(".player").click(function(e) {
+
+  function openPlayerInNewScreen() {
+    $(".player").click(function (e) {
       e.preventDefault();
       window.open($(this).attr('href'), '_player', 'width=500,height=500,titlebar,close');
       return false;
     });
-		</script>
-		@stack('scripts')
-	</body>
+  }
+
+  openPlayerInNewScreen();
+  $(".search_button").click(function (e) {
+    e.preventDefault();
+    $(".search_form").animate({width: 'toggle'}, 350);
+    $(this).find('.fa-magnifying-glass').toggle();
+    $(this).find('.fa-xmark').toggle();
+  });
+  $(".search_form").animate({width: 'toggle'}, 1);
+</script>
+@stack('scripts')
+</body>
 </html>

resources/views/layouts/sidebar.blade.php

@@ -1,35 +1,56 @@
 @extends('layouts/master')
 
 @section('page')
-    <div class="clearfix" style="height: 15px;"></div>
-    <div class="page_header clearfix page_margin_top">
-        <div class="page_header left">
-            <h1 class="page_title">@yield('title')</h1>
-        </div>
-        <div class="page_header_right">
+    <div class="row @yield('page_class')">
+        <div class="col-8">
+            <div class="box full-width">
                 @yield('breadcrumb')
-        </div>
-    </div>
-    <div class="page_layout clearfix">
-        <div class="row page_margin_top">
-            <div class="column column_2_3">
+                @yield('tags')
+                <h1 class="page_title">@yield('title')</h1>
                 @yield('content')
             </div>
-
-            <div class="column column_1_3">
-              <div class="kennismakingsdag">
-                    <h4 class="box_header">Kennismaken?</h4>
-                    <p>Wil je radio, tv of podcasts maken, techniek leren of je marketingskills inzetten? <a href="/vacatures/ontmoet-ons">Meld je aan en we nemen persoonlijk contact met je op</a> voor een kennismaking!</p>
-                    <a class="read_more" href="/vacatures" title="Bekijk alle vacatures"><span class="arrow"></span><span>Bekijk vacatures</span></a>
         </div>
-                <div class="clearfix"></div>
 
-                @include('widgets.banners')
-
-                @include('widgets.beelden')
-
-                @include('widgets.nustraks')
+        <div class="col-4">
+            @if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
+            <div data-tabs>
+                <div class="tabs">
+                    @if (isset($populair) && $populair)
+                    <h4 data-tab-content-id="tab_most_read" class="box_header active"><span>Meest gelezen</span></h4>
+                    @endif
+                    @if (isset($newsItems) && $newsItems)
+                    <h4 data-tab-content-id="tab_more_news" class="box_header"><span>Meer nieuws</span></h4>
+                    @endif
                 </div>
+                @if (isset($populair) && $populair)
+                <div id="tab_most_read" class="box tab_content active">
+                    @include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
+                    <a class="btn auto_width" id="meer-nieuws-most-read" href="#" data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
+                        <span class="fas fa-spinner fa-spin" id="loading"></span>
+                        Klik hier voor meer nieuws
+                    </a>
+                </div>
+                @endif
+                @if (isset($newsItems) && $newsItems)
+                <div id="tab_more_news" class="box tab_content">
+                    @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
+                    <a class="btn auto_width" id="meer-nieuws-more-news" href="#" data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
+                        <span class="fas fa-spinner fa-spin" id="loading"></span>
+                        Klik hier voor meer nieuws
+                    </a>
+                </div>
+                @endif
+            </div>
+            @endif
+
+            <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
+                - Advertentie -
+            </div>
+            <div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
+
+            @include('widgets/nhgooiradiotv', ['headerClass' => 'medium'])
+
+            @include('widgets/contact', [])
         </div>
     </div>
 

resources/views/listen.blade.php

@@ -4,14 +4,15 @@
     <a href="javascript:window.close();" class="close"><span class='fa fa-times fa-fw'></span> Venster sluiten</a>
     <p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo.png' )}}"></a></p>
 
-@if(false && $isStream)
-   <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het ongemak.</p>
+    @if(false && $isStream)
+        <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het
+            ongemak.</p>
         <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
-@else
+    @else
         <div class="now-playing-header">
             <div class="title"></div>
             <div class="artist"></div>
-@if(!$isStream)
+            @if(!$isStream)
                 <div class="controls">
                     <ul>
                         <li class="program-link">
@@ -22,12 +23,12 @@
                         </li>
                     </ul>
                 </div>
-@endif
+            @endif
         </div>
 
-<div class="player">
+        <div class="player">
             <p><b>U luistert nu naar</b> {!!$content!!}</p>
-@if(isset($tabs))
+            @if(isset($tabs))
                 <p>
                     @foreach($tabs as $link => $caption)
                         <a class="tab {{$link == '#' ? "active" : ""}}" href="{{$link}}">{{$caption}}</a>
@@ -36,7 +37,7 @@
             @endif
             <p>
                 <audio controls autoplay="true">
-     <source src="{{$source}}" type="audio/mp3" />
+                    <source src="{{$source}}" type="audio/mp3"/>
                 </audio>
             </p>
 
@@ -52,14 +53,17 @@
                     </a>
                 @endif
             </p>
-@endif
-</div>
-@endsection
+            @endif
+        </div>
+        @endsection
 
 
-@push('styles')
+        @push('styles')
             <style>
-    body { padding: 10px; }
+                body {
+                    padding: 10px;
+                }
+
                 .close {
                     float: right;
                 }
@@ -93,53 +97,64 @@
                     margin-top: 10px;
                     padding: 10px;
                 }
+
                 .player p {
                     color: black;
                 }
+
                 .player .tab {
                     color: black;
                     padding: 5px;
                     border-bottom: solid 4px transparent;
                 }
+
                 .player .tab.active {
                     border-bottom: solid 4px #5796C8;
                 }
+
                 .player .tab:hover {
                     text-decoration: none;
                     border-bottom: solid 4px #21BBEF;
                 }
+                .now-playing-header {
+                    width: 100%;
+                }
             </style>
-@endpush
+        @endpush
 
-@push('scripts')
-		<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
+        @push('scripts')
+            <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
             <script>
               function updateOnAir() {
                 $.ajax({
                   url: '{{route('onair')}}',
-					success: function(data) {
+                  success: function (data) {
                     $(document).trigger('onAirUpdated', data);
                   }
                 });
               }
+
               $(updateOnAir);
               var onAirUpdater = setInterval(updateOnAir, 5000);
-var $nowPlaying = { 
+              var $nowPlaying = {
                 container: $(".now-playing-header").hide(),
                 title: $(".now-playing-header .title"),
                 artist: $(".now-playing-header .artist"),
-};
-$(document).on('onAirUpdated', function(evt, data) {
-	if(data.inProgram) {
-		$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
-		$nowPlaying.artist.text(data.program.tagline);
-	} else {
+              };
+              $(document).on('onAirUpdated', function (evt, data) {
+                var title = data.current.title;
+                var artist = data.current.artist;
+                if (data.inProgram) {
+                  title = data.program.name;
+                  artist = data.program.tagline;
+                }
                 $nowPlaying.title.text(data.current.title).attr('title', data.current.title);
                 $nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
-	}
                 $nowPlaying.container.slideDown();
-});
-</script>
-@endpush
 
-@include('widgets.mediaplayer')
+                document.title = title + " - " + artist + " | NH Gooi";
+              });
+            </script>
+        @endpush
+
+        @include('widgets.mediaplayer')

resources/views/newsitem.blade.php

@@ -4,28 +4,38 @@
   {!!$news->title!!}
 @endsection
 
+@section('page_class')news_post post_container @endsection
+
 @section('breadcrumb')
 	<ul class="bread_crumb">
 		<li><a title="Nieuws" href="{{route('nieuws')}}">Nieuws</a></li>
-		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
+		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
 		<li><a title="{{$news->region->title}}" href="{{route('nieuws.regio', $news->region->slug)}}">{{$news->region->title}}</a></li>
-		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
-		<li>Details</li>
+		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+		<li>{!!$news->title!!}</li>
+	</ul>
+@endsection
+
+@section('tags')
+	<ul class="post_tags">
+		@if($news->region && $news->region->title != "Regio")
+			<li><a href="{{route('nieuws.regio', $news->region->slug)}}" title="{{$news->region->title}}">{{$news->region->title}}</a></li>
+		@endif
 	</ul>
 @endsection
 
 @section('content')
 
-<div class="row">
-	<div class="post single small_image">
+	<div class="post_body">
 		<ul class="post_details clearfix">
 			@if($news->region && $news->region->title != "Regio")
-			<li class="detail category">Regio <a href="{{route('nieuws.regio', $news->region->slug)}}" title="{{$news->region->title}}">{{$news->region->title}}</a></li>
+			<li class="detail category"><i class="fa-solid fa-location-dot"></i> Regio <a href="{{route('nieuws.regio', $news->region->slug)}}" title="{{$news->region->title}}">{{$news->region->title}}</a></li>
 			@endif
 			@if($news->theme && $news->theme->title != "Overig")
-			<li class="detail category">Thema <a href="{{route('nieuws.thema', $news->theme->slug)}}" title="{{$news->theme->title}}">{{$news->theme->title}}</a></li>
+			<li class="detail category"><i class="fa-solid fa-tag fa-rotate-90"></i> Thema <a href="{{route('nieuws.thema', $news->theme->slug)}}" title="{{$news->theme->title}}">{{$news->theme->title}}</a></li>
 			@endif
 			<li class="detail date">
+				<i class="fa-regular fa-clock"></i>
 				{{Formatter::relativeDate($news->published)}} om {{$news->published->format('H:i')}}
 				@if($news->edited && ($news->edited->format('d m H i') != $news->published->format('d m H i')))
 					| bijgewerkt:
@@ -36,7 +46,7 @@
 				@endif
 			</li>
 			@if($news->author)
-			<li class="detail author">{{$news->author}}</li>
+			<li class="detail author"><i class="fa-solid fa-pen"></i> {{$news->author}}</li>
 			@endif
 		</ul>
 
@@ -134,7 +144,8 @@
 						@endif
 					</ul>
 				--}}
-					<ul class="taxonomies categories right clearfix">
+					<ul class="post_tags clearfix">
+						<li>Tags:</li>
 						<li>
 							<a href="{{route('nieuws.thema', $news->theme->slug)}}" title="Zoek meer nieuws met het thema {{$news->theme->title}}">{{$news->theme->title}}</a>
 						</li>
@@ -146,6 +157,5 @@
 			</div>
 		</div>
 	</div>
-</div>
 
 @endsection

resources/views/partial/home_newslist_small.blade.php

@@ -0,0 +1,4 @@
+<div>
+    @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
+    @include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
+</div>

resources/views/partial/newslist_small.blade.php

@@ -1,39 +1,35 @@
-@foreach($news as $item)
-@if($loop->index % 3 == 0)
-<div class="row grid">
-	<ul>
-@endif
-		<li class="post column column_1_3">
+<ul id="{{$id}}" class="blog">
+    @foreach($news as $item)
+        <li class="post">
+            <div class="row">
+                <div class="col-4">
                     <a href="{{url($item->url)}}" title="{{$item->title}}">
                         @if($item->video)
                             <span class="icon video"></span>
                         @elseif($item->images && count($item->images) > 1)
                             <span class="icon gallery"></span>
                         @endif
-				<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='{{$item->images && count($item->images) ? $item->images[0]->title : $item->title}}'>
+                        <img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
+                             alt='img'>
                     </a>
-			<div class="post_content">
-				<h5>
-					<a href="{{url($item->url)}}" title="{{$item->title}}">{!! $item->title !!}</a>
-				</h5>
-				<ul class="post_details simple">
-					<li class="category">
-						<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
-					</li>
-					@if($item->edited && ($item->edited != $item->published))
-					<li class="date edited">
-						{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}}
-					</li>
-					@else
-					<li class="date">
-						{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
-					</li>
-					@endif
-				</ul>
+                </div>
+                <div class="col-8">
+                    <h2><a href="{{url($item->url)}}"
+                           title="{{$item->title}}">{!!$item->title!!}</a></h2>
+                    <?php
+                        $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
+                        if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
+                            $time .= ' | bijgewerkt: '
+                                . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
+                                . $item->edited->format('H:i') . ' uur';
+                        }
+                        $time = str_replace('  ', ' ', $time);
+                    ?>
+                    <span class="post_date" title="{{$time}}">
+						<i class="fa-regular fa-clock"></i> {{$time}}
+                    </span>
+                </div>
             </div>
         </li>
-@if($loop->index % 3 == 2 || $loop->last)
-	</ul>
-</div>
-@endif
-@endforeach
+    @endforeach
+</ul>

resources/views/partial/nh_story.blade.php

@@ -42,24 +42,37 @@
 			<img src="{{$image}}" class="attachment-small-slider-thumb size-small-slider-thumb wp-post-image" alt="{{$block->image->title}}" title="" style="display: block;">
 		</a>
 		<div class="sentence">
-			@if(isset($block->image->caption))
-			<span class="text">{{$block->image->caption}}</span>
-			@elseif(isset($block->image->title))
-			<span class="text">{{$block->image->title}}</span>
-			@endif
-			@if(isset($block->image->author))
-			<span class="author">{{$block->image->author}}</span>
-			@endif
+			<?php
+				$sentence = [];
+                if (isset($block->image->caption) && $block->image->caption) {
+					$sentence[] = '<span class="text">' . $block->image->caption . '</span>';
+				} elseif (isset($block->image->title) && $block->image->title) {
+					$sentence[] = '<span class="text">' . $block->image->title . '</span>';
+				}
+				if (isset($block->image->author) && $block->image->author) {
+					$sentence[] = '<span class="author">' . $block->image->author . '</span>';
+				}
+				$sentence = join('<span class="separator">|</span>', $sentence);
+			?>
+			{!!$sentence!!}
 		</div>
 		@endif
 	@elseif($block->type == "video" || $block->type == "headerVideo")
 		@include('widgets/mediaplayer')
-		<video controls>
+		<?php
+			$attr = '';
+            if (isset($block->video->images[0]->imageMedia) && $block->video->images[0]->imageMedia) {
+				$attr = ' poster="' . $block->video->images[0]->imageMedia . '"';
+			}
+		?>
+		<video controls{!!$attr!!}>
 		@foreach($block->video->streams as $stream)
 			<source src="{!!$stream->stream_url!!}" type="application/x-mpegurl" />
 		@endforeach
 		</video>
+		<div class="sentence">
 			<span class="author">{{$block->video->author}}</span>
+		</div>
 	@elseif($block->type == "carousel")
             <div class="horizontal_carousel_container gallery">
             <ul class="horizontal_carousel visible-5 autoplay-1 scroll-1 navigation-1 easing-easeInOutQuint duration-750">

resources/views/partial/podcastitems.blade.php

@@ -1,38 +1,27 @@
-@php($i = 0)
+<ul>
 @foreach($podcasts as $podcast)
-@if($i % 2 == 0)
-@if($i > 0) </ul><!--/.row--> @endif
-<ul class='blog row grid'>
-@endif
             <?php $url = route('gemist.fragment') . $podcast->url; ?>
-	<li class="post card column column_1_2">
+        <li class="post">
             <div class="post_content">
                 <h2><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
-			<ul class="post_details">
-			@if($podcast->program)
-				<li class="category">
-					<a href="{{ route('programma') . $podcast->program->url }}" title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
-				</li>
+                <div class="sub_title">
+                    @if ($podcast->program)
+                        <a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
+                           title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
                     @endif
-				<li class="date">
-					{{ Formatter::relativeDate($podcast->created) }}
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-			@if($podcast->image)
+                        <?php /** @var boolean $showTime **/ $time = Formatter::relativeDate($podcast->created) . ($showTime ? ' om ' . $podcast->published->format('H:i') : ''); ?>
+                    <span class="post_date"
+                          title="{{$time}}">
+					<i class="fa-regular fa-clock"></i> {{$time}}
+				</span>
+                </div>
+                @if($showImage && $podcast->image)
                     <a href="{{$url}}" title="{{$podcast->title}}" class="fixed-height">
                         <img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
                     </a>
                 @endif
-			<p>{!! Formatter::excerpt($podcast->content, 200) !!}</p>
-			<a class="read_more" href="{{route('gemist.fragment') . $podcast->url}}" title="Luister fragment"><span class="arrow"></span><span>Luister fragment</span></a>
-			<span class="clearfix"></span>
             </div>
         </li>
 
-@php($i++)
-@endforeach
-
-@if($i)
-</ul><!--/.row-->
-@endif
+    @endforeach
+</ul>

resources/views/widgets/menu.blade.php

@@ -29,7 +29,7 @@
 				"" => "/contact",
 				"Gooische courant" => array(
 						"Editie 2" => "/uploads/Gooische Courant editie 2.pdf",
-						"Editie 1(Huizen)" => "/uploads/NH Gooi Huizen.pdf",
+						"Editie 1 (Huizen)" => "/uploads/NH Gooi Huizen.pdf",
 						"Editie 1 (Hilversum)" => "/uploads/NH Gooi Hilversum.pdf",
 				),
 				"Contact" => "/contact",
@@ -99,10 +99,10 @@ function buildMenu($menu, $ismobile)
 			$icon = "";
 		}
 		$result .=
-				"<li class=\"" . ($submenu ? "submenu" : "") . ($isactive ? " selected" : "") . ($liClass ? " $liClass" : "") . "\">
+				"<li class=\"" . ($submenu ? "has_submenu" : "") . ($isactive ? " selected" : "") . ($liClass ? " $liClass" : "") . "\">
 			<a href=\"" . ($submenu ? $submenulink : $link) . "\" class=\"" . ($isplayer ? "player" : "") . "\" title=\"{$title}\" {$target}>{$icon}{$title}</a>";
 		if ($submenu) {
-			$result .= "\t\t\t<ul>\n"
+			$result .= "\t\t\t<ul class=\"submenu\">\n"
 					. buildMenu($link, $ismobile)
 					. "\t\t\t</ul>\n";
 		}
@@ -116,112 +116,9 @@ function buildMenu($menu, $ismobile)
 	<ul class="menu d-none d-lg-block">
 		<li></li>
 		@php($newsUrl = '/nieuws')
-		@if($news)
-			<li class="submenu mega_menu_parent {{isActive($newsUrl, false) ? "selected" : ""}}">
-				<a href="{{$newsUrl}}" title="Nieuws">
-					Nieuws
-				</a>
-				<ul>
-					@if($activeBlog != null)
-						<li class="{{isActive($activeBlog->url, false) ? "selected" : ""}}">
-							<a href="{{url($activeBlog->url)}}" title="Liveblog: {{$activeBlog->title}}">
-								<b>Live-blog</b> | {{$activeBlog->title}}
-							</a>
-						</li>
-					@endif
-					<li class="submenu">
-						<a href="{{$newsUrl}}" title="Laatste nieuws">
-							Laatste nieuws
-						</a>
-						<ul class="mega_menu blog">
-							@foreach($news as $item)
-								<li class="post">
-									@if($item->images && count($item->images))
-										<a href="{{url($item->url)}}" title="{{$item->title}}">
-											<img src='{{$imgBase . $item->images[0]->url}}' alt='{{$item->title}}'>
-										</a>
-									@endif
-									<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>
-									<ul class="post_details simple">
-										@if($item->region)
-											<li class="category">{{$item->region->title}}</li>
-										@endif
-										<li class="date">
-											{{Formatter::relativeDate($item->published)}}
-											om {{$item->published->format('H:i')}} uur
-										</li>
-									</ul>
-								</li>
-							@endforeach
-						</ul>
-					</li>
-					@if($popular)
-						<li class="submenu">
-							<a href="{{$newsUrl}}" title="Meest gelezen">
-								Meest gelezen
-							</a>
-							<ul class="mega_menu blog">
-								@foreach($popular as $item)
-									<li class="post">
-										@if($item->images && count($item->images))
-											<a href="{{url($item->url)}}" title="{{$item->title}}">
-												<img src='{{$imgBase . $item->images[0]->url}}' alt='{{$item->title}}'>
-											</a>
-										@endif
-										<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a>
-										</h5>
-										<ul class="post_details simple">
-											@if($item->region)
-												<li class="category">{{$item->region->title}}</li>
-											@endif
-											<li class="date">
-												{{Formatter::relativeDate($item->published)}}
-											</li>
-										</ul>
-									</li>
-								@endforeach
-							</ul>
-						</li>
-					@endif
-					@if($podcasts)
-						<li class="submenu">
-							<a href="{{route('gemist')}}" title="Gesprek gemist">
-								Fragment gemist
-							</a>
-							<ul class="mega_menu blog">
-								@foreach($podcasts as $item)
-									@if($loop->index >= 3)
-										@break
-									@endif
-									<li class="post">
-										@if($item->image)
-											<a href="{{route('gemist.fragment') . $item->url}}" title="{{$item->title}}"
-											   class="fixed-height">
-												<img src='{{$imgBase . $item->image->url}}' alt='{{$item->title}}'>
-											</a>
-										@endif
-										<h5><a href="{{route('gemist.fragment') . $item->url}}"
-											   title="{{$item->title}}">{{$item->title}}</a></h5>
-										<ul class="post_details simple">
-											@if($item->program)
-												<li class="category">{{$item->program->name}}</li>
-											@endif
-											<li class="date">
-												{{Formatter::relativeDate($item->created)}}
-											</li>
-										</ul>
-									</li>
-								@endforeach
-							</ul>
-						</li>
-					@endif
-				</ul>
-			</li>
-		@else
 		<li class="{{isActive($newsUrl, false) ? "selected" : ""}}">
 			<a href="{{$newsUrl}}" title="Nieuws">Nieuws</a>
 		</li>
-		@endif
 		{!! buildMenu($menu, false) !!}
 		<li></li>
 	</ul>

resources/views/widgets/nhgooiradiotv.blade.php

@@ -0,0 +1,15 @@
+<div class="tabs">
+    <h4 class="box_header {{$headerClass ?? ''}} active"><span>NH Gooi Radio live</span></h4>
+    <h4 class="box_header {{$headerClass ?? ''}}"><span>NH Gooi TV live</span></h4>
+</div>
+<div class="box radio_box">
+    <img class="logo-radio" src="/images/logo-radio.png"/>
+    <h2>Muziek & Informatie</h2>
+    <span class="post_date">
+                        <i class="fa-regular fa-clock"></i> 02:00 - 20:00
+                    </span>
+    <p>Non-stop muziekmix en regionieuws</p>
+    <a class="btn" href="#">Contact de studio</a>
+    <a class="btn" href="#">Luister live</a>
+    <a class="btn" href="#">Kijk live mee</a>
+</div>

routes/web.php

@@ -14,6 +14,8 @@
 Route::get('/', function() { return redirect()->route('nieuws'); });
 
 Route::get('/nieuws', 'NewsController@overview')->name('nieuws');
+Route::get('/nieuws/more', 'NewsController@more')->name('nieuws.more');
+Route::get('/nieuws/populair', 'NewsController@populair')->name('nieuws.populair');
 Route::get('/nieuws/regio/{region}', 'NewsController@regionlist' )->where(['region' => '[a-z0-9]+'])->name('nieuws.regio');
 Route::get('/nieuws/thema/{theme}', 'NewsController@themelist' )->where(['themelist' => '[a-z0-9]+'])->name('nieuws.thema');
 Route::get('/nieuws/{id}/{title}', 'NewsController@show')->where(['id' => '\d+'])->name('nieuws.detail');

srv/api/common/classes/Blog.php

@@ -2,7 +2,8 @@
 
 namespace Model;
 
-class Blog extends Model {
+class Blog extends Model
+{
     public $id;
     public $title;
     public $description;
@@ -13,7 +14,8 @@ class Blog extends Model {
 
     public $url;
 
-  public function __construct($data, $images = null, $podcast = null) {
+    public function __construct($data, $images = null, $podcast = null)
+    {
         parent::__construct($data);
         parent::ConvertToDateTime($this->start_date);
         parent::ConvertToDateTime($this->end_date);