.

content/includes/cookie-banner.blade.php

@@ -1,5 +1,4 @@
-<div class="fixed-bottom py-3 text-light" id="cookie-settings" style="background-color: {{$_primary_ci_color}}; bottom: -100%;">
+<div class="container fixed-bottom py-3 text-light rounded" id="cookie-settings" style="margin-bottom: 30px; background-color: {{$_primary_ci_color}}; bottom: -100%;">
-    <div class="container">
     <div class="row">
         <div class="col-12" style="max-height: 10vh;overflow: auto;">
             <h4 class="text-light mt-2">
@@ -189,8 +188,8 @@
             <button type="button" class="btn btn-link btn-sm text-light" data-bs-toggle="modal" data-bs-target="#modal-cookie-settings">Cookie-Einstelungen</button>
         </div>
     </div>
-    </div>
 </div>
+
 <div class="modal fade" id="modal-cookie-settings" tabindex="-1" aria-labelledby="cookie-settings" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">

content/lists/jobs.blade.php

@@ -8,7 +8,79 @@
                 <h1 class="mb-5 mt-5">{{ $list->name }}</h1>
 
 
-                <x-img src="{{ $list->image }}" class="img-fluid rounded mb-5" alt=""/>
+
+
+
+                <style>
+
+                    .block {
+                        width: 100%;
+                        height: 100%;
+                        position: relative;
+                        overflow: hidden;
+                        font-size: 16px;
+                    }
+
+
+
+                    .img-parallax {
+                        width: 100vmax;
+                        z-index: -1;
+                        position: absolute;
+                        top: 0;
+                        left: 50%;
+                        transform: translate(-50%, 0);
+                        pointer-events: none;
+                    }
+                </style>
+
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+                <div class="block rounded mb-5" style="height: 450px;">
+                    <img src="{{ $list->image }}" data-speed="-1"   class="img-parallax rounded mb-5" alt="{{config('settings.name')}} Cover" />
+
+
+                </div>
+
+
+
+
+                <script>
+                    $('.img-parallax').each(function() {
+  var $image = $(this);
+  var $imageParent = $(this).parent();
+
+  function parallaxImg () {
+    var speed = $image.data('speed');
+    var imageY = $imageParent.offset().top;
+    var winY = $(this).scrollTop();
+    var winH = $(this).height();
+    var parentH = $imageParent.innerHeight();
+    // The next pixel to show on screen
+    var winBottom = winY + winH;
+
+    // If block is shown on screen
+    if (winBottom > imageY && winY < imageY + parentH) {
+      // Number of pixels shown after block appear
+      var imgBottom = ((winBottom - imageY) * speed);
+      // Max number of pixels until block disappear
+      var imgTop = winH + parentH;
+      // Percentage between start showing until disappearing
+      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
+    }
+
+    $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
+  }
+
+  $(document).on({
+    scroll: function () {
+      parallaxImg();
+    }, ready: function () {
+      parallaxImg();
+    }
+  });
+});
+                </script>
 
 
                 <p class="fs-5 mb-5">

content/pages/kontakt.blade.php

@@ -158,7 +158,30 @@
     @endif
 
 
+    <div class="container-fluid">
+        @if(isset($_COOKIE["cookies-consent"]) && $_COOKIE["cookies-consent"])
+
             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2616.891113063286!2d12.10357687683789!3d49.0126564898375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479fc10aad3c56e3%3A0x4e1e3fd12a6be9a3!2sImmobilienverwaltung%20V%C3%B6lkl!5e0!3m2!1sde!2sde!4v1692953660472!5m2!1sde!2sde" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        @else
+            <div class="container">
+                <div class="row">
+                    <div class="col text-center p-5">
+                        <h5>Google Maps ist derzeit deaktiviert</h5>
+                        <br>
+                        <i class="text-muted small">Sie müssen laut unser Datenschutzbestimmungen Cookies akzeptieren um externe Dienste nutzen zu können</i>
+
+                        <br>
+                        <br>
+                        <a href="" class="btn btn-outline-primary btn-sm">Google Maps anzeigen</a>
+                    </div>
+                </div>
+
+            </div>
+        @endif
+    </div>
+
+
+
 @stop
     @section('scripts')
 @stop