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

app/Http/Controllers/NewsController.php

@@ -6,40 +6,80 @@ use Illuminate\Http\Request;
 use \Model\NewsItem;
 
 class NewsController extends Controller
-{ 
+{
-    private static function TimestampToDateTime($timestamp) {
+    private static function TimestampToDateTime($timestamp)
-      $result = new \DateTime;
+    {
-      $result->setTimestamp($timestamp);
+        $result = new \DateTime;
-      return $result;
+        $result->setTimestamp($timestamp);
+        return $result;
     }
- 
+
     public function show(Request $request, $id)
     {
         parent::registerView($request, 'nieuws', $id);
         $apiResult = $this->API('nieuws/bericht/' . $id);
-	$newsItem = new \Model\NewsItem($apiResult->news);
+        $newsItem = new \Model\NewsItem($apiResult->news);
 
-	switch($apiResult->version) {
+        switch ($apiResult->version) {
-		case 1:
+            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]);
+                return view('newsitem', ['news' => $newsItem, 'metadata' => $newsItem->metadata]);
-			break;
+                break;
 
-		case 2:
+            case 2:
-			$source = $apiResult->source;
+                $source = $apiResult->source;
-			$newsItem->published = self::TimestampToDateTime($source->created);
+                $newsItem->published = self::TimestampToDateTime($source->created);
-			$newsItem->edited = self::TimestampToDateTime($source->updated);
+                $newsItem->edited = self::TimestampToDateTime($source->updated);
-			$newsItem->author = $source->author;
+                $newsItem->author = $source->author;
-			$newsItem->images = null; // Images will be embedded
+                $newsItem->images = null; // Images will be embedded
-			$newsItem->video = null; // Videos will be embedded
+                $newsItem->video = null; // Videos will be embedded
-			$newsItem->content = $source->blocks;
+                $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)
@@ -51,25 +91,25 @@ if(!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
     {
         return $this->listNews($request, 'thema/' . $theme, ucfirst($theme));
     }
- 
+
-    public function search(Request $request, $query) 
+    public function search(Request $request, $query)
     {
         return $this->listNews($request, 'zoeken/' . $query, 'Zoekresultaat')->with('query', urldecode($query));
     }
-    
+
 
     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);
+                return redirect($blog->url);
             }
         }
- 
+
         return abort(404);
-    } 
+    }
 
     public function blog(Request $request, $id)
     {
@@ -77,60 +117,78 @@ 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));
+            $apiResult = $this->API('blog/overzicht/' . (int)$id . '?pagina=' . (int)max(1, $page));
-  
-          $blog = new \Model\Blog($apiResult->blog);
-          $items = [];
-          foreach($apiResult->items as $blogItem)
-          {
-              $items[] = new \Model\NewsItem($blogItem);
-          }
-  
-          if(count($items) || ($page == 1)) 
-          {
-            return view('blog', ['blog' => $blog, 'pagina' => $page, 'items' => $items, 'hasNext' => $hasNext && count($items) == 15]);
-          }
 
-          $hasNext = false;
+            $blog = new \Model\Blog($apiResult->blog);
-          --$page;
+            $items = [];
+            foreach ($apiResult->items as $blogItem) {
+                $items[] = new \Model\NewsItem($blogItem);
+            }
+
+            if (count($items) || ($page == 1)) {
+                return view('blog', ['blog' => $blog, 'pagina' => $page, 'items' => $items, 'hasNext' => $hasNext && count($items) == 15]);
+            }
+
+            $hasNext = false;
+            --$page;
         }
 
         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);
         }
 
         return view('popularnews', ['news' => $news]);
     }
 
-    public function regionieuws() 
+    public function regionieuws()
     {
         return view('listen', [
             'source' => $this->API_URL . 'nieuws/regionieuws',
-            'title' => 'Regionieuws', 
+            '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",
+    "sass-watch": "sass --watch resources/assets/sass:public/css",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "js-watch": "grunt watch"
-    "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"
   },
   "devDependencies": {
-    "axios": "^0.16.2",
+    "grunt": "^1.6.1",
-    "bootstrap": "^5.3.3",
+    "grunt-contrib-concat": "^2.1.0",
-    "cross-env": "^5.0.1",
+    "grunt-contrib-uglify": "^5.2.2",
-    "jquery": "^3.1.1",
+    "grunt-contrib-watch": "^1.1.0",
-    "laravel-mix": "^1.0",
+    "sass": "^1.71.1"
-    "lodash": "^4.17.4",
-    "sass": "^1.71.1",
-    "vue": "^2.1.10"
   }
 }

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;
+  width: 12px;
-  height: 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;
 }
-
+.now-playing-header .controls ul li a label {
-.blog_grid img {
+  cursor: pointer;
-  max-width: 100%;
 }
+
 .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 "../layout";
-@use "../components/main_news";

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;
+    @include reset-list;
-    padding: 0;
-    margin: 0;
     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;
+          width: 12px;
-          height: 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,17 +33,25 @@
     padding: 3px;
     width: 100%;
 
-    li {
+    ul {
-      display: inline-block;
+      margin: 0;
 
-      a {
+      li {
-        line-height: 120%;
+        display: inline-block;
-        font-size: 80%;
+
-        color: #ABABAB;
+        a {
-        display: block;
+          line-height: 120%;
-        padding: 4px;
+          font-size: 80%;
-        margin-left: 5px;
+          color: #ABABAB;
-        margin-right: 5px;
+          display: block;
+          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

@@ -1,269 +1,208 @@
 @extends('layouts.master')
 
 @section('title')
-  NH Gooi - Nieuws
+    NH Gooi - Nieuws
 @endsection
 
 
 @section('content')
-	{{-- Nieuws komt met 15 berichten per pagina. Deel op in (1 + 3) in de kop,
+    {{-- Nieuws komt met 15 berichten per pagina. Deel op in (1 + 3) in de kop,
-		1 x 2-breed en de rest 3-breed. --}}
+        1 x 2-breed en de rest 3-breed. --}}
-	<div class="page_layout page_margin_top clearfix">
+    <div class="page_layout page_margin_top clearfix">
-		<div class="row">
+        <div class="row">
-			<div class="column column_1_1">
+            <div class="column column_1_1">
-				<div class="blog_grid">
+                <div class="blog_grid">
-					{{-- Desktop --}}
+                    {{-- Desktop --}}
-					<div class="grid_view">
+                    <div class="grid_view">
-						<div class="row">
+                        <div class="row">
-							<div class="col-8">
+                            <div class="col-6">
-								@if($item = current($news))
+                                @if($item = current($news))
-								<div class="post large">
+                                    <div class="post large">
-									<a href="{{url($item->url)}}" title="{{$item->title}}">
+                                        <a href="{{url($item->url)}}" title="{{$item->title}}">
-										@if($item->video)
+                                            @if($item->video)
-										<span class="icon video"></span>
+                                                <span class="icon video"></span>
-										@elseif($item->images && count($item->images) > 1)
+                                            @elseif($item->images && count($item->images) > 1)
-										<span class="icon gallery"></span>
+                                                <span class="icon gallery"></span>
-										@endif
+                                            @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'}}'
-									</a>
+                                                 alt='img'>
-									<div class="slider_content_box">
+                                        </a>
-										<ul class="post_details simple">
+                                        <div class="slider_content_box">
-											@if($item->region)
+                                            <ul class="post_details simple">
-											<li class="category">
+                                                @if($item->region)
-												<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}" class="over_image">{{$item->region->title}}</a>
+                                                    <li class="category">
-											</li>
+                                                        <a title="Regio: {{$item->region->title}}"
-											@endif
+                                                           href="{{route('nieuws.regio', ['region' => $item->region->slug])}}"
-										</ul>
+                                                           class="over_image">{{$item->region->title}}</a>
-										<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h2>
+                                                    </li>
-									</div>
+                                                @endif
-								</div>
+                                            </ul>
-								@endif
+                                            <h2><a href="{{url($item->url)}}"
-							</div>
+                                                   title="{{$item->title}}">{!!$item->title!!}</a></h2>
-							<div class="col-4">
+                                                <?php
-								<div class="row">
+                                                $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
-									@for($i = 0; ($i < 4) && ($item = next($news)); ++$i)
+                                                if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
-									<div class="post small col-6">
+                                                    $time .= ' | bijgewerkt: '
-										<a href="{{url($item->url)}}" title="{{$item->title}}">
+                                                        . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
-											@if($item->video)
+                                                        . ' ' . $item->edited->format('H:i') . ' uur';
-											<span class="icon video"></span>
+                                                }
-											@elseif($item->images && count($item->images) > 1)
+                                                ?>
-											<span class="icon gallery"></span>
+                                            <span class="post_date" title="{{$time}}">
-											@endif
+                                                <i class="fa-regular fa-clock"></i> {{$time}}
-											<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                                            </span>
-										</a>
+                                        </div>
-										<div class="slider_content_box">
+                                    </div>
-											<ul class="post_details simple">
+                                @endif
-												@if($item->region)
+                            </div>
-												<li class="category">
+                            <div class="col-6">
-													<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}" class="over_image">{{$item->region->title}}</a>
+                                <div class="row">
-												</li>
+                                    @for($i = 0; ($i < 4) && ($item = next($news)); ++$i)
-												@endif
+                                        <div class="post small col-6">
-											</ul>
+                                            <a href="{{url($item->url)}}" title="{{$item->title}}">
-											<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h5>
+                                                @if($item->video)
-										</div>
+                                                    <span class="icon video"></span>
-									</div>
+                                                @elseif($item->images && count($item->images) > 1)
-									@endfor
+                                                    <span class="icon gallery"></span>
-								</div>
+                                                @endif
-							</div>
+                                                <img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
-						</div>
+                                                     alt='img'>
-					</div>
+                                            </a>
-					{{-- Mobile --}}
+                                            <div class="slider_content_box">
-					<div class="slider_view">
+                                                <ul class="post_details simple">
-						<div class="caroufredsel_wrapper caroufredsel_wrapper_slider">
+                                                    @if($item->region)
-							<ul class="slider id-small_slider">
+                                                        <li class="category">
-								@foreach($news as $item)
+                                                            <a title="Regio: {{$item->region->title}}"
-								@if($loop->index > 3) @break @endif
+                                                               href="{{route('nieuws.regio', ['region' => $item->region->slug])}}"
-								<li class="slide">
+                                                               class="over_image">{{$item->region->title}}</a>
-									<a href="{{url($item->url)}}" title="{{$item->title}}">
+                                                        </li>
-										@if($item->video)
+                                                    @endif
-										<span class="icon video"></span>
+                                                </ul>
-										@elseif($item->images && count($item->images) > 1)
+                                                <h5><a href="{{url($item->url)}}"
-										<span class="icon gallery"></span>
+                                                       title="{{$item->title}}">{!!$item->title!!}</a></h5>
-										@endif
+                                                    <?php
-										<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                                                    $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
-									</a>
+                                                    if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
-									<div class="slider_content_box">
+                                                        $time .= ' | bijgewerkt: '
-										<ul class="post_details simple">
+                                                            . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
-											@if($item->region)
+                                                            . ' ' . $item->edited->format('H:i') . ' uur';
-											<li class="category">
+                                                    }
-												<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
+                                                    ?>
-											</li>
+                                                <span class="post_date" title="{{$time}}">
-											@endif
+                                                    <i class="fa-regular fa-clock"></i> {{$time}}
-										</ul>
+                                                </span>
-											<h2 style="display:none;"><a href="{{url($item->url)}}" title="{{$item->title}}">{{Formatter::excerpt($item->title, 50)}}</a></h2>
+                                            </div>
-										<h5><a href="{{url($item->url)}}" title="sfd">{!!$item->title!!}</a></h5>
+                                        </div>
+                                    @endfor
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-									</div>
+        {{-- body --}}
-								</li>
+        <div class="row body_container">
-								@endforeach
+            <div class="col-md-9 col-12">
-							</ul>
+                <div class="row">
-						</div>
+                    <div class="col-md-6 col-12">
-						<div id="small_slider" class='slider_posts_list_container small'>
+                        <h4 class="box_header"><span>Meer nieuws</span></h4>
-						</div>
+                        <div class="box">
-					</div>
+                            @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => array_slice($news, 5, 5)])
-				</div>
+                        </div>
-			</div>
+                    </div>
-		</div>
 
-		{{-- Meer nieuws --}}
+                    <div class="col-md-6 col-12">
-		<div class="row page_margin_top">
+                        <h4 class="box_header"><span>Meest gelezen</span></h4>
-			<div class="column column_2_3">
+                        <div class="box">
-				<h4 class="box_header">Meer nieuws</h4>
+                            @include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
-				@foreach(array_slice($news, 4, 2) as $item)
+                        </div>
-					@if($loop->index % 2 == 0)
+                    </div>
-					<div class="row">
+                </div>
-					@endif
+                <div class="row mb-4">
-						<div class="column column_1_2">
+                    <div class="col-12">
-							<ul class="blog">
+                        <a class="btn auto_width" id="meer-nieuws" href="#"
-								<li class="post">
+                           data-loadmorenews='{"container":["#items-more-news", "#items-most-read"]}'>
-									<a href="{{url($item->url)}}" title="{{$item->title}}">
+                            <span class="fas fa-spinner fa-spin" id="loading"></span>
-										@if($item->video)
+                            Klik hier voor meer nieuws
-										<span class="icon video"></span>
+                        </a>
-										@elseif($item->images && count($item->images) > 1)
+                    </div>
-										<span class="icon gallery"></span>
+                </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;">
-										<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+                    - Advertentie -
-									</a>
+                </div>
-									<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{!!$item->title!!}</a></h2>
+                <div style="width: 100%;height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
-									<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">
+                @if ($podcast)
-					@include('partial/newslist_small', ['news' => array_slice($news, 6, count($news))])
+                        <?php $url = route('gemist.fragment') . $podcast->url; ?>
-				</div>
+                    <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>
+            <div class="col-md-3 col-12 sidebar">
-					<button class="more page_margin_top" type="button" id='meer-nieuws'>
+                @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
-						<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
-						LAAD MEER NIEUWSBERICHTEN
-					</button>
-				</div>
-			</div>
 
-			<div class="column column_1_3">
+                @include('widgets/contact', [])
-				@include('widgets.banners')
 
-				{{--
+                <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
-				<h4 class="box_header"><span class="fa fa-fire"></span> &nbsp; Meest gelezen</h4>
+                    - Advertentie -
-				@include('widgets.populairnieuws')
+                </div>
-				--}}
+                <div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
 
-				@include('widgets.nustraks')
+                <div class="podcast_items">
-
+                    <h4 class="box_header"><span>Fragment gemist</span></h4>
-				<h4 class="page_margin_top box_header"><span class="fa fa-history"></span> &nbsp; Iets gemist?</h4>
+                    <div class="box">
-				<p><a class="more" href="{{route('gemist.fragment')}}">Fragment gemist</a>
+                        @include('partial/podcastitems', ['showTime' => false, 'showImage' => false, 'podcasts' => $podcasts])
-				<a class="more" style="margin-top: 2px;" href="{{route('gemist.programma')}}">Programma terugluisteren</a></p>
+                    </div>
-
+                </div>
-				@if(!$title)
+            </div>
-				<h4 class="page_margin_top box_header"><span class="fa fa-tag"></span> &nbsp; Recente berichten</h4>
+        </div>
-				<?php
+    </div>
-					$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>
-				@endif
-			</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">
+    <section class="page-content col-lg-8 col-md-12">
-    <div id="items">
+        <div id="items">
-      @include('partial/newslistitems', ['news' => $news])
+            @include('partial/newslistitems', ['news' => $news])
-    </div>
-
-    <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%">
-          <b>Meer nieuwsberichten ophalen...</b>
         </div>
-      </div>
+
-    </div>
+        <div id="loading" style="display: none">
-  </section>
+            <div class="progress progress-striped active">
+                <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>
+        </div>
+    </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,474 +1,265 @@
 @section('page')
-	@yield('content')
+@yield('content')
 @endsection
-<!DOCTYPE html>
+        <!DOCTYPE html>
 <html>
-	@include('layouts._head')
+@include('layouts._head')
-	<body>
+<body>
+<button style="position: fixed; top: 0; left: 0;display: none" onclick="refreshCSS()">Refresh</button>
 <!-- Google Tag Manager (noscript) -->
 
-              <noscript>
+<noscript>
-                <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGLKLJ4" height="0" width="0" style="display:none; visibility:hidden"></iframe></noscript>
+    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGLKLJ4" height="0" width="0"
-               <!-- End Google Tag Manager (noscript) -->
+            style="display:none; visibility:hidden"></iframe>
-		<div class="site_container boxed">
+</noscript>
-			<div class="header_top_bar_container style_11 clearfix">
+<!-- End Google Tag Manager (noscript) -->
-{{--
+<div class="site_container boxed">
-				<div class="header_top_bar">
+    <div class="header_top_bar_container style_11 clearfix">
-					<form class="search">
+    </div>
-						<input type="text" name="s" placeholder="Search..." value="Search..." class="search_input hint">
+    <div class="header_container small">
-						<input type="submit" class="search_submit" value="">
+        <div class="header clearfix">
-						<input type="hidden" name="page" value="search">
+            <div class="logo">
-					</form>
+                <a href="{{url('/')}}"><img src="/images/logo.png" class="ri"/></a>
-					<!--<ul class="social_icons dark clearfix">
+            </div>
-					<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>
-					</div>
 
-					<div class="now-playing-header">
+            <div class="now-playing-header">
-						<div class="title"></div>
+                <div class="title"></div>
-						<div class="artist"></div>
+                <div class="artist"></div>
-						<div class="controls">
+                <div class="controls">
-							<ul>
+                    <ul>
-								<li class="program-link">
+                        <li class="program-link">
-									<a href='{{route('radio.gids')}}' title="Bekijk het huidige programma in de programmagids">
+                            <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>
+                                <label>Programmagids</label>
-									</a>
+                            </a>
-								</li>
+                        </li>
-								<li class="listen-live">
+                        <li class="listen-live">
-									<a href='{{route('luister.live')}}' title="Luister live naar NH Gooi Radio" class="player">
+                            <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>
+                                <label>Luister NH Gooi Radio</label>
-									</a>
+                            </a>
-								</li>
+                        </li>
-								<li class="watch-live">
+                        <li class="watch-live">
-									<a href='{{route('kijk.live')}}' title="Kijk live naar NH Gooi TV">
+                            <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>
+                                <label>Kijk NH Gooi TV</label>
-									</a>
+                            </a>
-								</li>
+                        </li>
-								<li class="watch-studio">
+                        <li class="watch-studio">
-									<a href='{{route('kijk.studio')}}' title="Kijk live mee in de radiostudio van NH Gooi">
+                            <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>
+                                <label>Studiocam</label>
-									</a>
+                            </a>
-								</li>
+                        </li>
-							</ul>
+                    </ul>
-						</div>
+                </div>
-					</div>
+            </div>
-				</div>
+        </div>
-			</div>
+    </div>
-			<div class="menu_container sticky clearfix">
+    <div class="menu_container sticky clearfix">
-				<div class="top_menu_container"></div>
+        <div class="top_menu_container">
-				@include('widgets.menu')
+            <ul>
-				@if(isset($searchURL))
+                <li>
-				<form class="search d-none" action="{{url($searchURL)}}">
+                    <a href="/">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
-					<input type="text" name="query" placeholder="Zoeken..." value="{{isset($query) ? $query : null}}" class="search_input hint">
+                </li>
-					<input type="submit" class="search_submit" value="Zoeken">
+                @if(isset($searchURL))
-				</form>
+                    <li>
-				@endif
+                        <form class="search_form" action="{{url($searchURL)}}">
-			</div>
+                            <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>
+        <a name="top"></a>
-	@if($activeBlog != null)
+        @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%;">
+            <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}}
+                <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
-		</p>
+                            class="fa fa-rss"></span><span>Volg het live-blog</span></a>
-	@endif
+            </p>
-	@yield('page')
+        @endif
-</div><!--/.page-->
+        @yield('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_container">
-				<div class="footer clearfix>
+        <div class="footer_menu">
-					<div class="row">
+            <div class="row">
-						<div class="column column_1_3">
+                <div class="col-3">
-							<h4 class="box_header">NH Gooi</h4>
+                    <h4 class="box_header"><span>NH Gooi</span></h4>
-							<p class="padding_top_bottom_25">
+                    <p class="about">
-						 		<b>NH Gooi</b> is de streekomroep voor het Gooi in samenwerking met NH Media.
+                        <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.
+                        NH Gooi Radio hoor je in heel Gooi en Eemland op 92.0 FM.
-								<a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
+                        <a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
-							</p>
+                    </p>
-							<div class="row">
+                </div>
-								<div class="column column_1_2">
+                <div class="col-3">
-									<h5>Bezoekadres / Studio</h5>
+                    <h4 class="box_header"><span>Contact</span></h4>
-									<p>
+                    <p class="buttons">
-									IJsselmeerstraat 3B <br/>
+                        <a href="/">Contactgegevens</a>
-									1271 AA, Huizen <br/>
+                        <a href="/">Klachtenregeling</a>
-									Tel: 	035-6424774 <br/>
+                        <a href="/">Frequenties</a>
-									Studio: 	035-6424776 <br/>
+                        <a href="/">Adverteren</a>
-									E-mail: 	info@nhgooi.nl <br/>
+                        <a href="/">NH Nieuws</a>
-									KvK: 	41194132
+                    </p>
-									</p>
+                </div>
-								</div>
+                <div class="col-3">
-								<div class="column column_1_2">
+                    <h4 class="box_header"><span>Kijk & luister</span></h4>
-									<h5>Postadres</h5>
+                    <p class="buttons">
-									<p>
+                        <a href="/">Luister live</a>
-									Postbus 83 <br/>
+                        <a href="/">Kijk live</a>
-									1270 AB  Huizen <br/>
+                        <a href="/">Uitgelichte video’s</a>
-									</p>
+                        <a href="/">Gemist</a>
-								</div>
+                        <a href="/">Nieuws</a>
-							</div>
+                    </p>
-							<a href="#" id="changePreferences">Pas hier uw cookie-instellingen aan</a>
+                </div>
-							{{--
+                <div class="col-3">
-							<h4 class="box_header page_margin_top">Get In Touch With Us</h4>
+                    <h4 class="box_header"><span>Radio</span></h4>
-							<ul class="social_icons dark page_margin_top clearfix">
+                    <p class="buttons">
-								<li>
+                        <a href="/">Programmagids</a>
-									<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
+                        <a href="/">Programma’s</a>
-										&nbsp;
+                        <a href="/">Podcasts</a>
-									</a>
+                    </p>
-								</li>
+                </div>
-								<li>
+            </div>
-									<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
+            <div class="row">
-										&nbsp;
+                <div class="col-12">
-									</a>
+                    <ul class="footer_menu2">
-								</li>
+                        <li>Logo</li>
-								<li>
+                        <li><a href="/">Disclaimer</a></li>
-									<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
+                        <li><a href="/">Privacy verklaring</a></li>
-										&nbsp;
+                        <li><a href="/">Cookie statement</a></li>
-									</a>
+                    </ul>
-								</li>
+                    <ul class="footer_social_media">
-								<li>
+                        <li><a class="facebook" title="Facebook" href="/"><i class="fa-brands fa-facebook-f"></i></a>
-									<a title="" href="#" class="social_icon skype">
+                        </li>
-										&nbsp;
+                        <li><a class="twitter-x" title="Twitter/X" href="/"><i class="fa-brands fa-twitter"></i></a>
-									</a>
+                        </li>
-								</li>
+                        <li><a class="youtube" title="Youtube" href="/"><i class="fa-brands fa-youtube"></i></a></li>
-								<li>
+                    </ul>
-									<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
+                </div>
-										&nbsp;
+            </div>
-									</a>
+        </div>
-								</li>
+        <div class="copyright">
-								<li>
+            © NH Gooi
-									<a title="" href="#" class="social_icon instagram">
+            <a class="scroll_top" href="#top" title="Scroll to top"><i class="fa-solid fa-angle-up"></i></a>
-										&nbsp;
+        </div>
-									</a>
+    </div>
-								</li>
+</div>
-								<li>
+<div class="background_overlay"></div>
-									<a title="" href="#" class="social_icon pinterest">
+<!--js-->
-										&nbsp;
+<!--<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
-									</a>
+<script type="text/javascript" src="/js/jquery-migrate-1.4.1.min.js"></script>
-								</li>
+<script type="text/javascript" src="/js/jquery.ba-bbq.min.js"></script>
-							</ul>
+<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>
-						</div>
+<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
-						<div class="column column_1_3">
+<script type="text/javascript" src="/js/jquery.touchSwipe.min.js"></script>
-							<h4 class="box_header">Fragment gemist</h4>
+<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
-							@include("widgets.laatstepodcasts")
+<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
-						</div>
+<script type="text/javascript" src="/js/jquery.sliderControl.js"></script>
-						<div class="column column_1_3">
+<script type="text/javascript" src="/js/jquery.timeago.js"></script>
-							<h4 class="box_header">Regio-agenda</h4>
+<script type="text/javascript" src="/js/jquery.hint.js"></script>
-							@include("widgets.regioagenda")
+<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
-						</div>
+<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
-					</div>
+<script type="text/javascript" src="/js/jquery.blockUI.js"></script>
-					<div class="row page_margin_top_section">
+<script type="text/javascript" src="/js/main.js"></script>
-						<div class="column column_1_4">
+<script type="text/javascript" src="/js/odometer.min.js"></script>-->
-							<a class="scroll_top" href="#top" title="Scroll to top">Top</a>
+<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
-						</div>
+<script type="text/javascript" src="/js/functions.js"></script>
-					</div>
+<script type="text/javascript">
-					<div class="row copyright_row">
+  $(window).resize(function () {
-						<div class="column column_2_3">
+    // Fix sticky for mobile menu indicator
-							&copy; Copyright <?php echo date('Y'); ?> NH Gooi. <a href="http://quanticalabs.com" title="QuanticaLabs" target="_blank">QuanticaLabs</a> - PressRoom Template.
+    menu_position = $(".menu_container").offset().top;
-						</div>
+  });
-						{{--
-						<div class="column column_1_3">
-							<ul class="footer_menu">
-								<li>
-									<h6><a href="?page=about" title="About">About</a></h6>
-								</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>
-							</ul>
-						</div>
-						--}}
-					</div>
-				</div>
-			</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() {
-				// Fix sticky for mobile menu indicator
-				menu_position = $(".menu_container").offset().top;
-			});
 
-			$(window).scroll(function() {
+  $(window).scroll(function () {
-				var topOfWindow = $(window).scrollTop();
+    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();
+    else $(".scroll_top_floater").fadeOut();
-			});
+  });
-			$(".scroll_top_floater").hide();
+  $(".scroll_top_floater").hide();
 
-			function updateOnAir() {
+  function updateOnAir() {
-				$.ajax({
+    $.ajax({
-					url: '{{route('onair')}}',
+      url: '{{route('onair')}}',
-					success: function(data) {
+      success: function (data) {
-						$(document).trigger('onAirUpdated', data);
+        $(document).trigger('onAirUpdated', data);
-					}
+      }
-				});
+    });
-			}
+  }
 
-			$(updateOnAir);
+  $(updateOnAir);
-			var onAirUpdater = setInterval(updateOnAir, 5000);
+  var onAirUpdater = setInterval(updateOnAir, 5000);
-			var $nowPlaying = {
+  var $nowPlaying = {
-				container: $(".now-playing-header").hide(),
+    container: $(".now-playing-header").hide(),
-				title: $(".now-playing-header .title"),
+    title: $(".now-playing-header .title"),
-				artist: $(".now-playing-header .artist"),
+    artist: $(".now-playing-header .artist"),
-				controls: $(".now-playing-header .controls"),
+    controls: $(".now-playing-header .controls"),
-				studiocam: $(".now-playing-header .watch-studio, li.watch-studio"),
+    studiocam: $(".now-playing-header .watch-studio, li.watch-studio"),
-				programLink: $(".now-playing-header .program-link a"),
+    programLink: $(".now-playing-header .program-link a"),
-				programLabel: $(".now-playing-header .program-link a > label"),
+    programLabel: $(".now-playing-header .program-link a > label"),
-				first: true
+    first: true
-			};
+  };
-			$(document).on('onAirUpdated', function(evt, data) {
+  $(document).on('onAirUpdated', function (evt, data) {
-				if(data.inProgram) {
+    if (data.inProgram) {
-					$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
+      $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);
+        $nowPlaying.artist.text((data.current.artist ? data.current.artist + ' - ' : '') + data.current.title);
-                                        } else {
+      } else {
-						$nowPlaying.artist.text(data.program.tagline);
+        $nowPlaying.artist.text(data.program.tagline);
-					}
+      }
-				} else {
+    } else {
-					$nowPlaying.programLabel.text(data.program.name).attr('title', data.program.name + "\n" + data.program.tagline);
+      $nowPlaying.programLabel.text(data.program.name).attr('title', data.program.name + "\n" + data.program.tagline);
-					$nowPlaying.title.text(data.current.title).attr('title', data.current.title);
+      $nowPlaying.title.text(data.current.title).attr('title', data.current.title);
-					$nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
+      $nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
-				}
+    }
-                                $nowPlaying.studiocam.toggle(data.stream != false);
+    $nowPlaying.studiocam.toggle(data.stream != false);
-				$nowPlaying.programLink.attr('href', '{{route("programma")}}' + data.program.url);
+    $nowPlaying.programLink.attr('href', '{{route("programma")}}' + data.program.url);
-				if($nowPlaying.first) { $nowPlaying.controls.hide(); }
+    if ($nowPlaying.first) {
-				$nowPlaying.container.slideDown(function() {
+      $nowPlaying.controls.hide();
-					if($nowPlaying.first) {
+    }
-						$nowPlaying.controls.fadeIn('slow');
+    $nowPlaying.container.slideDown(function () {
-						$nowPlaying.first = false;
+      if ($nowPlaying.first) {
-					}
+        $nowPlaying.controls.fadeIn('slow');
-				});
+        $nowPlaying.first = false;
+      }
+    });
 
-				// Now playing may have moved the menu
+    // Now playing may have moved the menu
-				menu_position = $(".menu_container").offset().top;
+    menu_position = $(".menu_container").offset().top;
-			});
+  });
-			$(".player").click(function(e) {
+
-				e.preventDefault();
+  function openPlayerInNewScreen() {
-				window.open($(this).attr('href'), '_player', 'width=500,height=500,titlebar,close');
+    $(".player").click(function (e) {
-				return false;
+      e.preventDefault();
-			});
+      window.open($(this).attr('href'), '_player', 'width=500,height=500,titlebar,close');
-		</script>
+      return false;
-		@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="row @yield('page_class')">
-    <div class="page_header clearfix page_margin_top">
+        <div class="col-8">
-        <div class="page_header left">
+            <div class="box full-width">
-            <h1 class="page_title">@yield('title')</h1>
+                @yield('breadcrumb')
-        </div>
+                @yield('tags')
-        <div class="page_header_right">
+                <h1 class="page_title">@yield('title')</h1>
-            @yield('breadcrumb')
-        </div>
-    </div>
-    <div class="page_layout clearfix">
-        <div class="row page_margin_top">
-            <div class="column column_2_3">
                 @yield('content')
             </div>
+        </div>
 
-            <div class="column column_1_3">
+        <div class="col-4">
-              <div class="kennismakingsdag">
+            @if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
-                    <h4 class="box_header">Kennismaken?</h4>
+            <div data-tabs>
-                    <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>
+                <div class="tabs">
-                    <a class="read_more" href="/vacatures" title="Bekijk alle vacatures"><span class="arrow"></span><span>Bekijk vacatures</span></a>
+                    @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>
-                <div class="clearfix"></div>
+                @if (isset($populair) && $populair)
-
+                <div id="tab_most_read" class="box tab_content active">
-                @include('widgets.banners')
+                    @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"}'>
-                @include('widgets.beelden')
+                        <span class="fas fa-spinner fa-spin" id="loading"></span>
-
+                        Klik hier voor meer nieuws
-                @include('widgets.nustraks')
+                    </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

@@ -1,145 +1,160 @@
 @extends('layouts.empty')
 
 @section('content')
-   <a href="javascript:window.close();" class="close"><span class='fa fa-times fa-fw'></span> Venster sluiten</a>
+    <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>
+    <p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo.png' )}}"></a></p>
 
-@if(false && $isStream)
+    @if(false && $isStream)
-   <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het ongemak.</p>
+        <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het
-   <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
+            ongemak.</p>
-@else
+        <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
-					<div class="now-playing-header">
+    @else
-						<div class="title"></div>
+        <div class="now-playing-header">
-						<div class="artist"></div>
+            <div class="title"></div>
-@if(!$isStream)
+            <div class="artist"></div>
-						<div class="controls">
+            @if(!$isStream)
-							<ul>
+                <div class="controls">
-								<li class="program-link">
+                    <ul>
-									<a href='{{route('luister.live')}}' title="Luister naar NH Gooi Radio">
+                        <li class="program-link">
-										<span class="fa fa-music"></span>
+                            <a href='{{route('luister.live')}}' title="Luister naar NH Gooi Radio">
-										<label>Luister live</label>
+                                <span class="fa fa-music"></span>
-									</a>	
+                                <label>Luister live</label>
-								</li>
+                            </a>
-							</ul>
+                        </li>
-						</div>
+                    </ul>
-@endif
+                </div>
-					</div>
+            @endif
+        </div>
 
-<div class="player">
+        <div class="player">
-   <p><b>U luistert nu naar</b> {!!$content!!}</p>
+            <p><b>U luistert nu naar</b> {!!$content!!}</p>
-@if(isset($tabs))
+            @if(isset($tabs))
-   <p>
+                <p>
-     @foreach($tabs as $link => $caption)
+                    @foreach($tabs as $link => $caption)
-     <a class="tab {{$link == '#' ? "active" : ""}}" href="{{$link}}">{{$caption}}</a>
+                        <a class="tab {{$link == '#' ? "active" : ""}}" href="{{$link}}">{{$caption}}</a>
-     @endforeach
+                    @endforeach
-   </p>
+                </p>
-   @endif
+            @endif
-   <p>
+            <p>
-   <audio controls autoplay="true">
+                <audio controls autoplay="true">
-     <source src="{{$source}}" type="audio/mp3" />
+                    <source src="{{$source}}" type="audio/mp3"/>
-   </audio>
+                </audio>
-   </p>
+            </p>
 
-     <p>
+            <p>
-     @if(!$isStream && $canDownload) 
+                @if(!$isStream && $canDownload)
-        <a href="{{$source}}" class="action_button">
+                    <a href="{{$source}}" class="action_button">
-          <span class="fa fa-download"></span><span>Download .mp3-bestand</span>
+                        <span class="fa fa-download"></span><span>Download .mp3-bestand</span>
-        </a>
+                    </a>
-     @endif
+                @endif
-     @if(!$isStream)
+                @if(!$isStream)
-        <a href="{{route('luister.live')}}" class="action_button">
+                    <a href="{{route('luister.live')}}" class="action_button">
-          <span class="fa fa-music"></span><span>Schakel naar live-uitzending</span>
+                        <span class="fa fa-music"></span><span>Schakel naar live-uitzending</span>
-        </a>
+                    </a>
-     @endif
+                @endif
-     </p>
+            </p>
-@endif
+            @endif
-</div>
+        </div>
-@endsection
+        @endsection
 
 
-@push('styles')
+        @push('styles')
-  <style>
+            <style>
-    body { padding: 10px; }
+                body {
-    .close {
+                    padding: 10px;
-        float: right;
+                }
-    }
 
-    p {
+                .close {
-      padding: 5px; 
+                    float: right;
-      margin: 0; 
+                }
-    }
 
-    .action_button {
+                p {
-        float: none;
+                    padding: 5px;
-    }
+                    margin: 0;
- 
+                }
-    .logo { 
-      width: 90%;
-      max-width: 300px;
-      margin: auto;
-    }
 
-        .logo img {
+                .action_button {
-            width: 100%;
+                    float: none;
-        }
+                }
 
-    .now-playing {
+                .logo {
-      color: black;
+                    width: 90%;
-    }   
+                    max-width: 300px;
+                    margin: auto;
+                }
 
-    .player { 
+                .logo img {
-        border: outset 2px #21BBEF; 
+                    width: 100%;
-        border-radius: 8px;
+                }
-        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;
-         }
-  </style>
-@endpush
 
-@push('scripts')
+                .now-playing {
-		<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
+                    color: black;
-		<script>
+                }
-			function updateOnAir() {
-				$.ajax({
-					url: '{{route('onair')}}', 
-					success: function(data) {
-						$(document).trigger('onAirUpdated', data);
-					}
-				});
-			}
-			$(updateOnAir);
-			var onAirUpdater = setInterval(updateOnAir, 5000);
-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 {
-		$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')
+                .player {
+                    border: outset 2px #21BBEF;
+                    border-radius: 8px;
+                    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
+
+        @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) {
+                    $(document).trigger('onAirUpdated', data);
+                  }
+                });
+              }
+
+              $(updateOnAir);
+              var onAirUpdater = setInterval(updateOnAir, 5000);
+              var $nowPlaying = {
+                container: $(".now-playing-header").hide(),
+                title: $(".now-playing-header .title"),
+                artist: $(".now-playing-header .artist"),
+              };
+              $(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();
+
+                document.title = title + " - " + artist + " | NH Gooi";
+              });
+            </script>
+        @endpush
+
+        @include('widgets.mediaplayer')

resources/views/newsitem.blade.php

@@ -1,42 +1,52 @@
 @extends('layouts/sidebar')
 
-@section('title') 
+@section('title')
   {!!$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 class="separator"><i class="fa-solid fa-chevron-right"></i></li>
-		<li>Details</li>
+		<li>{!!$news->title!!}</li>
 	</ul>
-@endsection 
+@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_body">
-	<div class="post single small_image">
 		<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">		
+			<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:
 					@if($news->edited->format('d m') != $news->published->format('d m'))
-					{{strtolower(Formatter::relativeDate($news->edited))}} 
+					{{strtolower(Formatter::relativeDate($news->edited))}}
 					@endif
 					om {{$news->edited->format('H:i')}} uur
 				@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>
 
@@ -46,12 +56,12 @@
 			<div class="announcement">
 				<div>
 					<audio controls>
-					<source src="{{ $url = url( $apiUrl . 'podcast/download' . $news->podcast->url . "?auth=" . $news->podcast->auth )}}" type="audio/mpeg" /> 
+					<source src="{{ $url = url( $apiUrl . 'podcast/download' . $news->podcast->url . "?auth=" . $news->podcast->auth )}}" type="audio/mpeg" />
 					</audio>
 				</div>
 				<ul class="post_details clearfix">
 					<li class="detail date">
-							{{ Formatter::relativeDate($news->podcast->created) }} uitgezonden 
+							{{ Formatter::relativeDate($news->podcast->created) }} uitgezonden
 							@if($news->podcast->program) in <a href="{{ route('programma') . $news->podcast->program->url }}">{{ $news->podcast->program->name }}</a> @endif
 					</li>
 					<li class="detail category">
@@ -111,7 +121,7 @@
 					<p>{!!$news->content!!}</p>
 				</div>
 				@endif
-				
+
 				@if($news->source && $news->source->show)
 				<div class="post-source">
 				<p>Bron: {{$news->source->title}}</p>
@@ -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)
+<ul id="{{$id}}" class="blog">
-@if($loop->index % 3 == 0)
+    @foreach($news as $item)
-<div class="row grid">
+        <li class="post">
-	<ul>
+            <div class="row">
-@endif
+                <div class="col-4">
-		<li class="post column column_1_3">
+                    <a href="{{url($item->url)}}" title="{{$item->title}}">
-			<a href="{{url($item->url)}}" title="{{$item->title}}">
+                        @if($item->video)
-				@if($item->video)
+                            <span class="icon video"></span>
-				<span class="icon video"></span>
+                        @elseif($item->images && count($item->images) > 1)
-				@elseif($item->images && count($item->images) > 1)
+                            <span class="icon gallery"></span>
-				<span class="icon gallery"></span>
+                        @endif
-				@endif
+                        <img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
-				<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}}'>
+                             alt='img'>
-			</a>
+                    </a>
-			<div class="post_content">
+                </div>
-				<h5>
+                <div class="col-8">
-					<a href="{{url($item->url)}}" title="{{$item->title}}">{!! $item->title !!}</a>
+                    <h2><a href="{{url($item->url)}}"
-				</h5>
+                           title="{{$item->title}}">{!!$item->title!!}</a></h2>
-				<ul class="post_details simple">
+                    <?php
-					<li class="category">
+                        $time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
-						<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
+                        if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
-					</li>
+                            $time .= ' | bijgewerkt: '
-					@if($item->edited && ($item->edited != $item->published))
+                                . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
-					<li class="date edited">
+                                . $item->edited->format('H:i') . ' uur';
-						{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}}
+                        }
-					</li>
+                        $time = str_replace('  ', ' ', $time);
-					@else
+                    ?>
-					<li class="date">
+                    <span class="post_date" title="{{$time}}">
-						{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
+						<i class="fa-regular fa-clock"></i> {{$time}}
-					</li>
+                    </span>
-					@endif
+                </div>
-				</ul>
+            </div>
-			</div>
+        </li>
-		</li>
+    @endforeach
-@if($loop->index % 3 == 2 || $loop->last)
+</ul>
-	</ul>
-</div>
-@endif
-@endforeach

resources/views/partial/nh_story.blade.php

@@ -1,4 +1,4 @@
-@foreach($content as $block) 
+@foreach($content as $block)
 	@if($block->type == "headerRichA")
 		@php($block->image->url = isset($block->image->crops)
 			? $block->image->crops->{'16:9'}->{'1600'}
@@ -23,11 +23,11 @@
 	@elseif($block->type == "quote")
 		<blockquote>
 			{!!$block->text!!}
-			<div class="author">{{$block->name}}</div>	
+			<div class="author">{{$block->name}}</div>
 		</blockquote>
-	@elseif($block->type == "image") 
+	@elseif($block->type == "image")
 		<?php
-			if(isset($block->image->imageWide)) 
+			if(isset($block->image->imageWide))
 				$image = $block->image->imageWide;
 			else if(isset($block->image->crop))
 				$image = $block->image->crop;
@@ -42,30 +42,43 @@
 			<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))
+			<?php
-			<span class="text">{{$block->image->caption}}</span>
+				$sentence = [];
-			@elseif(isset($block->image->title))
+                if (isset($block->image->caption) && $block->image->caption) {
-			<span class="text">{{$block->image->title}}</span>
+					$sentence[] = '<span class="text">' . $block->image->caption . '</span>';
-			@endif
+				} elseif (isset($block->image->title) && $block->image->title) {
-			@if(isset($block->image->author))
+					$sentence[] = '<span class="text">' . $block->image->title . '</span>';
-			<span class="author">{{$block->image->author}}</span>
+				}
-			@endif
+				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" /> 
+			<source src="{!!$stream->stream_url!!}" type="application/x-mpegurl" />
 		@endforeach
 		</video>
-		<span class="author">{{$block->video->author}}</span>
+		<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">
             @foreach($block->items as $image)
 		<?php
-			if(isset($image->image->imageWide)) 
+			if(isset($image->image->imageWide))
 				$img = $image->image->imageWide;
 			else if(isset($block->image->crop))
 				$image = $block->image->crop;

resources/views/partial/podcastitems.blade.php

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

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="{{isActive($newsUrl, false) ? "selected" : ""}}">
-			<li class="submenu mega_menu_parent {{isActive($newsUrl, false) ? "selected" : ""}}">
+			<a href="{{$newsUrl}}" title="Nieuws">Nieuws</a>
-				<a href="{{$newsUrl}}" title="Nieuws">
+		</li>
-					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,12 +14,14 @@
 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');
 Route::get('/nieuws/zoeken/{query}', 'NewsController@search')->name('nieuws.zoeken');
-Route::get('/nieuws/zoeken', function(Illuminate\Http\Request $request) { 
+Route::get('/nieuws/zoeken', function(Illuminate\Http\Request $request) {
-  if($query = $request->get('query', null)) { 
+  if($query = $request->get('query', null)) {
     return redirect('/nieuws/zoeken/' . urlencode($query));
   }
   return redirect('/nieuws');
@@ -53,8 +55,8 @@ Route::get('/luister/programma')->name('luister.programma');
 
 Route::get('/gemist', 'RadioController@podcasts')->name('gemist');
 Route::get('/gemist/zoeken/{query}', 'RadioController@searchpodcast')->name('gemist.zoeken');
-Route::get('/gemist/zoeken', function(Illuminate\Http\Request $request) { 
+Route::get('/gemist/zoeken', function(Illuminate\Http\Request $request) {
-  if($query = $request->get('query', null)) { 
+  if($query = $request->get('query', null)) {
     return redirect('/gemist/zoeken/' . urlencode($query));
   }
   return redirect('/gemist');
@@ -68,8 +70,8 @@ Route::get('/gemist/programma/{programma}/{title}', 'RadioController@podcasts')-
 Route::get('/podcast/{programma}/{title}', 'PodcastController@podcasts')->where(['programma' => '\d+']);
 Route::get('/podcast/aflevering/{id}/{title}', 'PodcastController@podcast')->where(['id' => '\d+']);
 Route::get('/podcast/zoeken/{query}', 'RadioController@searchpodcast')->name('gemist.zoeken');
-Route::get('/podcast/zoeken', function(Illuminate\Http\Request $request) { 
+Route::get('/podcast/zoeken', function(Illuminate\Http\Request $request) {
-  if($query = $request->get('query', null)) { 
+  if($query = $request->get('query', null)) {
     return redirect('/podcast/zoeken/' . urlencode($query));
   }
   return redirect('/podcast');

srv/api/common/classes/Blog.php

@@ -1,23 +1,25 @@
-<?php 
+<?php
 
 namespace Model;
 
-class Blog extends Model {
+class Blog extends Model
-  public $id;
+{
-  public $title;
+    public $id;
-  public $description;
+    public $title;
-  public $news_category;
+    public $description;
-  public $start_date;
+    public $news_category;
-  public $end_date; 
+    public $start_date;
-  public $is_active;
+    public $end_date;
+    public $is_active;
 
-  public $url;
+    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::__construct($data);
-    parent::ConvertToDateTime($this->end_date);
+        parent::ConvertToDateTime($this->start_date);
+        parent::ConvertToDateTime($this->end_date);
 
-    $this->url = "/blog/{$this->id}/" . parent::url_slug($this->title);
+        $this->url = "/blog/{$this->id}/" . parent::url_slug($this->title);
-  }
+    }
 }

srv/api/common/classes/NewsItem.php

@@ -12,7 +12,7 @@ class NewsItem extends Model {
   public $author;
   public $content;
   public $published;
-  public $edited; 
+  public $edited;
   public $keywords;
 
   public $source;