webseite/frontend/README.md

@@ -0,0 +1,33 @@
+# Aufgabe
+
+- Nach Positionsveränderung (drop, move-up,move-down) sollen alle Positionen der Zeilen als Array festgehalten werden.
+
+```js
+
+const positions = [
+  {
+    _id: '6cbe4783-cfb5-4ed7-8196-9d6b55217de0',
+    position: 1,
+  },
+  {
+    _id: '6cbe4783-cfb5-4ed7-8196-9d6b55217de0',
+    position: 2,
+  },
+  {...}
+  ]
+
+```
+
+- Positionsarray an Server zur Aktualisierung senden (PUT)
+
+```js
+'http://127.0.0.1:8000/api/products/positions';
+```
+
+- Server: Positionen abfangen und products Array aktualisieren
+
+```js
+//ProductModel
+updatePosition() {...}
+
+```

webseite/frontend/assets/css/main.css

@@ -12064,7 +12064,6 @@ html {
 
 html,
 body {
-  height: 100%;
   padding: 0;
   margin: 0;
 }
@@ -12103,6 +12102,509 @@ h6,
   font-weight: 700;
 }
 
+.splide__container {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.splide__list {
+  backface-visibility: hidden;
+  display: flex;
+  height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.splide.is-initialized:not(.is-active) .splide__list {
+  display: block;
+}
+
+.splide__pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0;
+  pointer-events: none;
+}
+
+.splide__pagination li {
+  display: inline-block;
+  line-height: 1;
+  list-style-type: none;
+  margin: 0;
+  pointer-events: auto;
+}
+
+.splide:not(.is-overflow) .splide__pagination {
+  display: none;
+}
+
+.splide__progress__bar {
+  width: 0;
+}
+
+.splide {
+  position: relative;
+  visibility: hidden;
+}
+
+.splide.is-initialized, .splide.is-rendered {
+  visibility: visible;
+}
+
+.splide__slide {
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  list-style-type: none !important;
+  margin: 0;
+  position: relative;
+}
+
+.splide__slide img {
+  vertical-align: bottom;
+}
+
+.splide__spinner {
+  animation: splide-loading 1s infinite linear;
+  border: 2px solid #999;
+  border-left-color: transparent;
+  border-radius: 50%;
+  bottom: 0;
+  contain: strict;
+  display: inline-block;
+  height: 20px;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+}
+
+.splide__sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.splide__toggle__pause {
+  display: none;
+}
+
+.splide__toggle.is-active .splide__toggle__play {
+  display: none;
+}
+
+.splide__toggle.is-active .splide__toggle__pause {
+  display: inline;
+}
+
+.splide__track {
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+@keyframes splide-loading {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+.splide__track--draggable {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.splide__track--fade > .splide__list > .splide__slide {
+  margin: 0 !important;
+  opacity: 0;
+  z-index: 0;
+}
+
+.splide__track--fade > .splide__list > .splide__slide.is-active {
+  opacity: 1;
+  z-index: 1;
+}
+
+.splide--rtl {
+  direction: rtl;
+}
+
+.splide__track--ttb > .splide__list {
+  display: block;
+}
+
+.splide__arrow {
+  background: #ccc;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  opacity: 0.7;
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  height: 2em;
+  width: 2em;
+}
+
+.splide__arrow svg {
+  fill: #000;
+  height: 1.2em;
+  width: 1.2em;
+}
+
+.splide__arrow:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.splide__arrow:disabled {
+  opacity: 0.3;
+}
+
+.splide__arrow:focus-visible {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide__arrow--prev {
+  left: 1em;
+}
+
+.splide__arrow--prev svg {
+  transform: scaleX(-1);
+}
+
+.splide__arrow--next {
+  right: 1em;
+}
+
+.splide.is-focus-in .splide__arrow:focus {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide__pagination {
+  bottom: 0.5em;
+  left: 0;
+  padding: 0 1em;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
+.splide__pagination__page {
+  background: #ccc;
+  border: 0;
+  border-radius: 50%;
+  display: inline-block;
+  height: 8px;
+  margin: 3px;
+  padding: 0;
+  position: relative;
+  transition: transform 0.2s linear;
+  width: 8px;
+  opacity: 0.7;
+}
+
+.splide__pagination__page.is-active {
+  background: #fff;
+  z-index: 1;
+  transform: scale(1.4);
+}
+
+.splide__pagination__page:hover {
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+.splide__pagination__page:focus-visible {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide.is-focus-in .splide__pagination__page:focus {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide__progress__bar {
+  background: #ccc;
+  height: 1rem;
+}
+
+.splide__slide {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.splide__slide:focus {
+  outline: 0;
+}
+
+@supports (outline-offset: -3px) {
+  .splide__slide:focus-visible {
+    outline: #0bf 3px solid;
+    outline-offset: -3px;
+  }
+}
+.splide__slide:focus-visible {
+  /* IE does not support outline-offset */
+}
+
+@media screen and (-ms-high-contrast: none) {
+  .splide__slide:focus-visible {
+    border: #0bf 3px solid;
+  }
+}
+@supports (outline-offset: -3px) {
+  .splide.is-focus-in .splide__slide:focus {
+    outline: #0bf 3px solid;
+    outline-offset: -3px;
+  }
+}
+.splide.is-focus-in .splide__slide:focus {
+  /* IE does not support outline-offset */
+}
+
+@media screen and (-ms-high-contrast: none) {
+  .splide.is-focus-in .splide__slide:focus {
+    border: #0bf 3px solid;
+  }
+}
+@media screen and (-ms-high-contrast: none) {
+  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
+    border-color: #0bf;
+  }
+}
+.splide__toggle {
+  cursor: pointer;
+}
+
+.splide__toggle:focus-visible {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide.is-focus-in .splide__toggle:focus {
+  outline: #0bf 3px solid;
+  outline-offset: 3px;
+}
+
+.splide__track--nav > .splide__list > .splide__slide {
+  border: 3px solid transparent;
+  cursor: pointer;
+}
+
+.splide__track--nav > .splide__list > .splide__slide.is-active {
+  border: 3px solid #000;
+}
+
+.splide__arrows--rtl .splide__arrow--prev {
+  left: auto;
+  right: 1em;
+}
+
+.splide__arrows--rtl .splide__arrow--prev svg {
+  transform: scaleX(1);
+}
+
+.splide__arrows--rtl .splide__arrow--next {
+  left: 1em;
+  right: auto;
+}
+
+.splide__arrows--rtl .splide__arrow--next svg {
+  transform: scaleX(-1);
+}
+
+.splide__arrows--ttb .splide__arrow {
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.splide__arrows--ttb .splide__arrow--prev {
+  top: 1em;
+}
+
+.splide__arrows--ttb .splide__arrow--prev svg {
+  transform: rotateZ(-90deg);
+}
+
+.splide__arrows--ttb .splide__arrow--next {
+  bottom: 1em;
+  top: auto;
+}
+
+.splide__arrows--ttb .splide__arrow--next svg {
+  transform: rotateZ(90deg);
+}
+
+.splide__pagination--ttb {
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: auto;
+  padding: 1em 0;
+  right: 0.5em;
+  top: 0;
+}
+
+@keyframes splide-loading {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+.splide__track--draggable {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.splide__track--fade > .splide__list > .splide__slide {
+  margin: 0 !important;
+  opacity: 0;
+  z-index: 0;
+}
+
+.splide__track--fade > .splide__list > .splide__slide.is-active {
+  opacity: 1;
+  z-index: 1;
+}
+
+.splide--rtl {
+  direction: rtl;
+}
+
+.splide__track--ttb > .splide__list {
+  display: block;
+}
+
+.splide__container {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.splide__list {
+  backface-visibility: hidden;
+  display: flex;
+  height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.splide.is-initialized:not(.is-active) .splide__list {
+  display: block;
+}
+
+.splide__pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0;
+  pointer-events: none;
+}
+
+.splide__pagination li {
+  display: inline-block;
+  line-height: 1;
+  list-style-type: none;
+  margin: 0;
+  pointer-events: auto;
+}
+
+.splide:not(.is-overflow) .splide__pagination {
+  display: none;
+}
+
+.splide__progress__bar {
+  width: 0;
+}
+
+.splide {
+  position: relative;
+  visibility: hidden;
+}
+
+.splide.is-initialized, .splide.is-rendered {
+  visibility: visible;
+}
+
+.splide__slide {
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  list-style-type: none !important;
+  margin: 0;
+  position: relative;
+}
+
+.splide__slide img {
+  vertical-align: bottom;
+}
+
+.splide__spinner {
+  animation: splide-loading 1s infinite linear;
+  border: 2px solid #999;
+  border-left-color: transparent;
+  border-radius: 50%;
+  bottom: 0;
+  contain: strict;
+  display: inline-block;
+  height: 20px;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+}
+
+.splide__sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.splide__toggle__pause {
+  display: none;
+}
+
+.splide__toggle.is-active .splide__toggle__play {
+  display: none;
+}
+
+.splide__toggle.is-active .splide__toggle__pause {
+  display: inline;
+}
+
+.splide__track {
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
 /*!
  * Toastify js 1.12.0
  * https://github.com/apvarun/toastify-js
@@ -12211,11 +12713,23 @@ h6,
 }
 
 .header-main {
+  position: relative;
   width: 100%;
   height: 400px;
+}
+.header-main .content-box {
+  position: relative;
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: auto;
+  margin: 0 auto;
+  height: 100%;
+  max-width: 360px;
+  max-height: 380px;
+}
+.header-main {
   background: #f2ebbf url("../img/header-image.webp") center no-repeat;
   background-size: cover;
 }
@@ -12229,6 +12743,36 @@ h6,
 .header-main--min .content-box figure {
   width: 150px;
 }
+.header-main .splide {
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  overflow: hidden;
+}
+.header-main .splide .splide__track {
+  height: 100%;
+}
+.header-main .splide .splide__track .splider-content::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.header-main .splide .splide__track .splider-content {
+  height: 100%;
+  padding: 0;
+}
+.header-main .splide .splide__track .splider-content img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
 
 figure.logo-main {
   width: 280px;
@@ -12292,6 +12836,18 @@ figure.logo-main figcaption {
   color: #f06060;
 }
 
+.product-manager .nav-products-actions {
+  margin: 1rem 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.product-manager .nav-products-actions .list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 1rem;
+}
 .product-manager table .th-actions {
   width: 200px;
 }

webseite/frontend/dev/scripts/main.js

@@ -1,6 +1,7 @@
 // import 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
 
 import ProductManager from './modules/ProductManager'; // Dateiendung kann weggelassen werden, wenn ein Bundler eingesetzt wird (esbuild, webpack, rollup, etc.)
+import Splide from '@splidejs/splide';
 
 (() => {
   // === DOM & VARS =======
@@ -26,6 +27,13 @@ import ProductManager from './modules/ProductManager'; // Dateiendung kann wegge
       case '/':
       case '/index.html':
         console.log('HOME');
+        const splider = new Splide('.splide', {
+          type: 'loop',
+          fixedHeight: '100%',
+          height: '100%',
+          autoHeight: true,
+        }).mount();
+
         // nur Skripte, die für Home relevant ausführen
         break;
       case '/projects/product-manager.html':

webseite/frontend/dev/scripts/modules/ProductManager.js

@@ -26,6 +26,10 @@ const ProductManager = (el = null) => {
     btnAdd: module.querySelector('.button-product-add'),
     templateRow: module.querySelector('.template-row'),
 
+    // Nav Actions
+    btnSave: module.querySelector('.button-products-save'),
+    btnReset: module.querySelector('.button-products-reset'),
+
     // Modal Edit
     modalEdit: module.querySelector('.modal-edit'),
     formEdit: module.querySelector('.form-product-edit'),
@@ -59,6 +63,9 @@ const ProductManager = (el = null) => {
     initProducts();
 
     // Event-Lauscher zu beginn der Anwendung
+    DOM.btnReset.addEventListener('click', onClickReset);
+    DOM.btnSave.addEventListener('click', onClickSave);
+
     DOM.btnAdd.addEventListener('click', onClickAdd);
     DOM.btnAdd.disabled = true;
     DOM.btnConfirmDelete.addEventListener('click', onClickConfirmDelete);
@@ -76,6 +83,35 @@ const ProductManager = (el = null) => {
     DOM.btnAdd.disabled = (DOM.inputName.value === '' || DOM.inputPrice.value === ''); // prettier-ignore
   };
 
+  const onClickReset = (e) => {
+    const btnEl = e.currentTarget;
+
+    // async process
+    resetProducts().then((data) => {
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        loadProducts();
+      }
+    });
+  };
+
+  const onClickSave = (e) => {
+    const btnEl = e.currentTarget;
+    const icon = btnEl.querySelector('i');
+
+    icon.classList.add('fa-jello');
+
+    // async process
+    saveProducts().then((data) => {
+      if (data.success) {
+        setTimeout(() => {
+          icon.classList.remove('fa-jello');
+        }, 500);
+        Toast(data.msg, 'success').show();
+      }
+    });
+  };
+
   const onSubmitEdit = (e) => {
     e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
 
@@ -264,6 +300,56 @@ const ProductManager = (el = null) => {
 
   // === XHR/FETCH ========
 
+  // HTTP - Methode - PATCH
+  // reset products
+  const resetProducts = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/reset`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ reset: true }),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      Toast(error, 'error').show();
+
+      console.error(error);
+      return error;
+    }
+  };
+
+  // HTTP - Methode - PATCH
+  // save products
+  const saveProducts = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/save`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ save: true }),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      Toast(error, 'error').show();
+
+      console.error(error);
+      return error;
+    }
+  };
+
   // HTTP - Methode - POST
   // (C)RUD - create
   // BRE(A)D - add - neues Produkt hinzufügen

webseite/frontend/dev/scss/04_plugins/_index.scss

@@ -1 +1,4 @@
+@import 'splide-4.1.4/themes/default/index';
+@import 'splide-4.1.4/core/index';
+
 @import 'toastify-1.12/toastify';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/foundation/animations.scss

@@ -0,0 +1,9 @@
+@keyframes splide-loading {
+  0% {
+    transform: rotateZ( 0 );
+  }
+
+  100% {
+    transform: rotateZ( 360deg );
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/index.scss

@@ -0,0 +1,3 @@
+@forward 'foundation/animations';
+@forward 'object/modifiers';
+@forward 'object/objects';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/modifiers/draggable.scss

@@ -0,0 +1,8 @@
+.splide {
+  $root: &;
+
+  &__track--draggable {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/modifiers/fade.scss

@@ -0,0 +1,18 @@
+.splide {
+  $root: &;
+
+  &__track--fade {
+    > #{ $root }__list {
+      > #{ $root }__slide {
+        margin: 0 !important;
+        opacity: 0;
+        z-index: 0;
+
+        &.is-active {
+          opacity: 1;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/modifiers/index.scss

@@ -0,0 +1,4 @@
+@forward 'draggable';
+@forward 'fade';
+@forward 'rtl';
+@forward 'ttb';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/modifiers/rtl.scss

@@ -0,0 +1,5 @@
+.splide {
+  &--rtl {
+    direction: rtl;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/modifiers/ttb.scss

@@ -0,0 +1,9 @@
+.splide {
+  $root: &;
+
+  &__track--ttb {
+    > #{ $root }__list {
+      display: block;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/container.scss

@@ -0,0 +1,6 @@
+.splide {
+  &__container {
+    box-sizing: border-box;
+    position: relative;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/index.scss

@@ -0,0 +1,10 @@
+@forward 'container';
+@forward 'list';
+@forward 'pagination';
+@forward 'progress';
+@forward 'root';
+@forward 'slide';
+@forward 'spinner' as spinner-*;
+@forward 'sr';
+@forward 'toggle';
+@forward 'track';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/list.scss

@@ -0,0 +1,17 @@
+.splide {
+  $root: &;
+
+  &__list {
+    backface-visibility: hidden;
+    display: flex;
+    height: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  &.is-initialized:not( .is-active ) {
+    #{ $root }__list {
+      display: block;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/pagination.scss

@@ -0,0 +1,26 @@
+.splide {
+  $root: &;
+
+  &__pagination {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0;
+    pointer-events: none;
+
+    li {
+      display: inline-block;
+      line-height: 1;
+      list-style-type: none;
+      margin: 0;
+      pointer-events: auto;
+    }
+  }
+
+  &:not( .is-overflow ) {
+    #{ $root }__pagination {
+      display: none;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/progress.scss

@@ -0,0 +1,7 @@
+.splide {
+  &__progress {
+    &__bar {
+      width: 0;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/root.scss

@@ -0,0 +1,9 @@
+.splide {
+  position: relative;
+  visibility: hidden;
+
+  &.is-initialized,
+  &.is-rendered {
+    visibility: visible;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/slide.scss

@@ -0,0 +1,14 @@
+.splide {
+  &__slide {
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    list-style-type: none !important;
+    margin: 0;
+    position: relative;
+
+    img {
+      vertical-align: bottom;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/spinner.scss

@@ -0,0 +1,21 @@
+$size: 20px !default;
+$border: 2px solid #999 !default;
+
+.splide {
+  &__spinner {
+    animation: splide-loading 1s infinite linear;
+    border: $border;
+    border-left-color: transparent;
+    border-radius: 50%;
+    bottom: 0;
+    contain: strict;
+    display: inline-block;
+    height: $size;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $size;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/sr.scss

@@ -0,0 +1,12 @@
+.splide {
+  &__sr {
+    border: 0;
+    clip: rect( 0 0 0 0 );
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/toggle.scss

@@ -0,0 +1,22 @@
+.splide {
+  &__toggle {
+    $parent: &;
+
+    &__play {
+    }
+
+    &__pause {
+      display: none;
+    }
+
+    &.is-active {
+      #{ $parent }__play {
+        display: none;
+      }
+
+      #{ $parent }__pause {
+        display: inline;
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/core/object/objects/track.scss

@@ -0,0 +1,7 @@
+.splide {
+  &__track {
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/foundation/colors.scss

@@ -0,0 +1,8 @@
+$main: #000 !default;
+$sub01: #333 !default;
+$sub02: #999 !default;
+
+$background: #ccc !default;
+$background-active: #fff !default;
+
+$focus: #0bf !default;

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/foundation/mixins.scss

@@ -0,0 +1,27 @@
+@use './colors';
+
+$outline: colors.$focus 3px solid !default;
+$outline-offset: 3px !default;
+$outline-offset-inset: -3px !default;
+
+@mixin ie-only {
+  @media screen and (-ms-high-contrast: none) {
+    @content;
+  }
+}
+
+@mixin focus-outline( $offset: $outline-offset ) {
+  outline: $outline;
+  outline-offset: $offset;
+}
+
+@mixin focus-outline-inset {
+  @supports ( outline-offset: $outline-offset-inset ) {
+    @include focus-outline( $outline-offset-inset );
+  }
+
+  /* IE does not support outline-offset */
+  @include ie-only {
+    border: $outline;
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/index.scss

@@ -0,0 +1,13 @@
+@use 'foundation/colors';
+
+$spinner-size: 20px !default;
+$spinner-border: 2px solid colors.$sub02 !default;
+
+@use '../../core/object/objects' with (
+  $spinner-size: $spinner-size,
+  $spinner-border: $spinner-border,
+);
+
+@forward '../../core';
+@forward 'object/objects';
+@forward 'object/modifiers';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/modifiers/index.scss

@@ -0,0 +1,3 @@
+@forward 'nav' as nav-*;
+@forward 'rtl' as rtl-*;
+@forward 'ttb' as ttb-*;

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/modifiers/nav.scss

@@ -0,0 +1,37 @@
+@use '../../foundation/colors';
+@use '../../foundation/mixins';
+
+$border: 3px solid transparent !default;
+$border-active: 3px solid colors.$main !default;
+$border-radius: false !default;
+$opacity: false !default;
+$opacity-active: false !default;
+
+.splide {
+  $root: &;
+
+  &__track--nav {
+    > #{ $root }__list {
+      > #{ $root }__slide {
+        border: $border;
+        cursor: pointer;
+
+        @if $opacity {
+          opacity: $opacity;
+        }
+
+        @if $border-radius {
+          border-radius: $border-radius;
+        }
+
+        &.is-active {
+          border: $border-active;
+
+          @if $opacity {
+            opacity: $opacity-active;
+          }
+        }
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/modifiers/rtl.scss

@@ -0,0 +1,28 @@
+$arrow-right: 1em !default;
+$arrow-left: 1em !default;
+
+.splide {
+  $root: &;
+
+  &__arrows--rtl {
+    #{ $root }__arrow {
+      &--prev {
+        left: auto;
+        right: $arrow-right;
+
+        svg {
+          transform: scaleX( 1 );
+        }
+      }
+
+      &--next {
+        left: $arrow-left;
+        right: auto;
+
+        svg {
+          transform: scaleX( -1 );
+        }
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/modifiers/ttb.scss

@@ -0,0 +1,54 @@
+$arrow-top: 1em !default;
+$arrow-bottom: 1em !default;
+$pagination-left: auto !default;
+$pagination-right: .5em !default;
+$pagination-dot-width: false !default;
+$pagination-dot-height: false !default;
+
+.splide {
+  $root: &;
+
+  &__arrows--ttb {
+    #{ $root }__arrow {
+      left: 50%;
+      transform: translate( -50%, 0 );
+
+      &--prev {
+        top: $arrow-top;
+
+        svg {
+          transform: rotateZ( -90deg );
+        }
+      }
+
+      &--next {
+        bottom: $arrow-bottom;
+        top: auto;
+
+        svg {
+          transform: rotateZ( 90deg );
+        }
+      }
+    }
+  }
+
+  &__pagination--ttb {
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    left: $pagination-left;
+    padding: 1em 0;
+    right: $pagination-right;
+    top: 0;
+
+    #{ $root }__pagination__page {
+      @if $pagination-dot-width {
+        width: $pagination-dot-width;
+      }
+
+      @if $pagination-dot-height {
+        height: $pagination-dot-height;
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/arrow.scss

@@ -0,0 +1,105 @@
+@use '../../foundation/colors';
+@use '../../foundation/mixins';
+
+$size: 1.2em !default;
+$fill: colors.$main !default;
+$fill-hover: false !default;
+$transition: false !default;
+$button-size: 2em !default;
+$button-background: colors.$background !default;
+$button-background-hover: false !default;
+$button-border: 0 !default;
+$button-padding: 0 !default;
+$button-border-radius: 50% !default;
+$button-transition: false !default;
+$opacity: .7 !default;
+$opacity-hover: .9 !default;
+$opacity-disabled: .3 !default;
+$left: 1em !default;
+$right: 1em !default;
+
+.splide {
+  $root: &;
+
+  &__arrow {
+    background: $button-background;
+    border: $button-border;
+    cursor: pointer;
+    padding: $button-padding;
+    position: absolute;
+    top: 50%;
+    transform: translateY( -50% );
+    z-index: 1;
+
+    @if $opacity {
+      opacity: $opacity;
+    }
+
+    @if $button-size {
+      align-items: center;
+      border-radius: $button-border-radius;
+      display: flex;
+      justify-content: center;
+      height: $button-size;
+      width: $button-size;
+    }
+
+    @if $button-transition {
+      transition: $button-transition;
+    }
+
+    svg {
+      fill: $fill;
+      height: $size;
+      width: $size;
+
+      @if $transition {
+        transition: $transition;
+      }
+    }
+
+    &:hover:not(:disabled) {
+      @if $opacity-hover {
+        opacity: $opacity-hover;
+      }
+
+      @if $button-background-hover {
+        background: $button-background-hover;
+      }
+
+      @if $fill-hover {
+        svg {
+          fill: $fill-hover;
+        }
+      }
+    }
+
+    &:disabled {
+      @if $opacity-disabled {
+        opacity: $opacity-disabled;
+      }
+    }
+
+    &:focus-visible {
+      @include mixins.focus-outline;
+    }
+
+    &--prev {
+      left: $left;
+
+      svg {
+        transform: scaleX( -1 );
+      }
+    }
+
+    &--next {
+      right: $right;
+    }
+  }
+
+  &.is-focus-in {
+    #{ $root }__arrow:focus {
+      @include mixins.focus-outline;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/index.scss

@@ -0,0 +1,5 @@
+@forward 'arrow' as arrow-*;
+@forward 'pagination' as pagination-*;
+@forward 'progress' as progress-*;
+@forward 'slide' as slide-*;
+@forward 'toggle' as toggle-*;

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/pagination.scss

@@ -0,0 +1,80 @@
+@use '../../foundation/colors';
+@use '../../foundation/mixins';
+
+$bottom: .5em !default;
+$dot-width: 8px !default;
+$dot-height: 8px !default;
+$dot-background: colors.$background !default;
+$dot-background-hover: false !default;
+$dot-background-active: colors.$background-active !default;
+$dot-border: 0 !default;
+$dot-border-radius: 50% !default;
+$dot-margin: 3px !default;
+$dot-padding: 0 !default;
+$dot-opacity: .7 !default;
+$dot-opacity-hover: .9 !default;
+$dot-transition: transform .2s linear !default;
+$dot-transform-active: scale( 1.4 ) !default;
+
+.splide {
+  $root: &;
+
+  &__pagination {
+    bottom: $bottom;
+    left: 0;
+    padding: 0 1em;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+
+    &__page {
+      background: $dot-background;
+      border: $dot-border;
+      border-radius: $dot-border-radius;
+      display: inline-block;
+      height: $dot-height;
+      margin: $dot-margin;
+      padding: $dot-padding;
+      position: relative;
+      transition: $dot-transition;
+      width: $dot-width;
+
+      @if $dot-opacity {
+        opacity: $dot-opacity;
+      }
+
+      &.is-active {
+        background: $dot-background-active;
+        z-index: 1;
+
+        @if $dot-transform-active {
+          transform: $dot-transform-active;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+
+        @if $dot-opacity-hover {
+          opacity: $dot-opacity-hover;
+        }
+
+        @if $dot-background-hover {
+          background: $dot-background-hover;
+        }
+      }
+
+      &:focus-visible {
+        @include mixins.focus-outline;
+      }
+    }
+  }
+
+  &.is-focus-in {
+    #{ $root }__pagination {
+      &__page:focus {
+        @include mixins.focus-outline;
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/progress.scss

@@ -0,0 +1,13 @@
+@use '../../foundation/colors';
+
+$height: 3px !default;
+$background: colors.$background;
+
+.splide {
+  &__progress {
+    &__bar {
+      background: $background;
+      height: $height;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/slide.scss

@@ -0,0 +1,42 @@
+@use '../../foundation/colors';
+@use '../../foundation/mixins';
+
+$border-radius: false !default;
+$outline-offset: -2px !default;
+
+.splide {
+  $root: &;
+
+  &__slide {
+    -webkit-tap-highlight-color: transparent;
+
+    @if $border-radius {
+      border-radius: $border-radius;
+    }
+
+    // Gets rid of a focus ring in IE and Safari
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus-visible {
+      @include mixins.focus-outline-inset;
+    }
+  }
+
+  &.is-focus-in {
+    #{ $root }__slide:focus {
+      @include mixins.focus-outline-inset;
+    }
+
+    #{ $root }__track {
+      > #{ $root }__list {
+        > #{ $root }__slide:focus {
+          @include mixins.ie-only {
+            border-color: colors.$focus;
+          }
+        }
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/template/default/object/objects/toggle.scss

@@ -0,0 +1,19 @@
+@use '../../foundation/mixins';
+
+.splide {
+  $root: &;
+
+  &__toggle {
+    cursor: pointer;
+
+    &:focus-visible {
+      @include mixins.focus-outline;
+    }
+  }
+
+  &.is-focus-in {
+    #{ $root }__toggle:focus {
+      @include mixins.focus-outline;
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/default/index.scss

@@ -0,0 +1 @@
+@forward '../../template/default';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/sea-green/index.scss

@@ -0,0 +1,52 @@
+$main: #20b2aa !default;
+$main-light: lighten( $main, 20% ) !default;
+
+@use '../../template/default/foundation/colors' with (
+  $main: $main,
+  $sub01: $main,
+  $sub02: $main,
+  $background: #ccc,
+  $background-active: $main,
+  $focus: $main,
+);
+
+@use '../../template/default/object/modifiers/nav' with (
+  $border-radius: 4px,
+  $opacity: .7,
+  $opacity-active: 1,
+);
+
+@use '../../template/default/object/modifiers/ttb' with (
+  $pagination-dot-width: 5px,
+  $pagination-dot-height: 20px,
+  $pagination-right: 1em,
+);
+
+@use '../../template/default/object/objects/arrow' with (
+  $size: 2.5em,
+  $opacity: false,
+  $opacity-hover: false,
+  $fill-hover: $main-light,
+  $transition: fill .2s linear,
+  $button-size: 2.5em,
+  $button-border-radius: 0,
+  $button-background: transparent,
+);
+
+@use '../../template/default/object/objects/pagination' with (
+  $bottom: 1em,
+  $dot-width: 20px,
+  $dot-height: 5px,
+  $dot-border-radius: 2.5px,
+  $dot-opacity: false,
+  $dot-transition: background-color .2s linear,
+  $dot-background-hover: $main-light,
+  $dot-transform-active: false,
+);
+
+@use '../../template/default/object/objects/slide' with (
+  $border-radius: 4px,
+);
+
+@forward '../../template/default';
+@forward 'object/objects';

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/sea-green/object/objects/arrow.scss

@@ -0,0 +1,17 @@
+.splide {
+  $root: &;
+
+  &__slider {
+    > #{ $root }__arrows {
+      #{ $root }__arrow {
+        &--prev {
+          left: -2.5em;
+        }
+
+        &--next {
+          right: -2.5em;
+        }
+      }
+    }
+  }
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/sea-green/object/objects/index.scss

@@ -0,0 +1,3 @@
+@forward 'arrow';
+@forward 'root';
+

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/sea-green/object/objects/root.scss

@@ -0,0 +1,3 @@
+.splide {
+  padding: 3em;
+}

webseite/frontend/dev/scss/04_plugins/splide-4.1.4/themes/skyblue/index.scss

@@ -0,0 +1,37 @@
+$main: #00bfff !default;
+$main-light: lighten( $main, 20% ) !default;
+
+@use '../../template/default/foundation/colors' with (
+  $main: $main,
+  $sub01: $main,
+  $sub02: $main,
+  $background: #ccc,
+  $background-active: $main,
+  $focus: $main,
+);
+
+@use '../../template/default/object/modifiers/nav' with (
+  $opacity: .7,
+  $opacity-active: 1,
+);
+
+@use '../../template/default/object/objects/arrow' with (
+  $size: 2.5em,
+  $opacity: false,
+  $opacity-hover: false,
+  $fill-hover: $main-light,
+  $transition: fill .2s linear,
+  $button-size: 2.5em,
+  $button-border-radius: 0,
+  $button-background: transparent,
+);
+
+@use '../../template/default/object/objects/pagination' with (
+  $dot-width: 10px,
+  $dot-height: 10px,
+  $dot-opacity: false,
+  $dot-transition: ( background-color .2s linear, transform .2s linear ),
+  $dot-background-hover: $main-light,
+);
+
+@forward '../../template/default';

webseite/frontend/dev/scss/05_modules/_header-main.scss

@@ -1,9 +1,20 @@
 .header-main {
+  position: relative;
+
   width: 100%;
   height: 400px;
-  display: flex;
+  .content-box {
-  justify-content: center;
+    position: relative;
-  align-items: center;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    margin: 0 auto;
+    height: 100%;
+    max-width: 360px;
+    max-height: 380px;
+  }
 
   background: $color-3 url('../img/header-image.webp') center no-repeat;
   background-size: cover;
@@ -20,6 +31,39 @@
       }
     }
   }
+
+  .splide {
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    overflow: hidden;
+    .splide__track {
+      height: 100%;
+      .splider-content {
+        &::after {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        height: 100%;
+        padding: 0;
+        img {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
   // .content-box {
   //   figure {
   //     width: 280px;

webseite/frontend/dev/scss/05_modules/_product-manager.scss

@@ -1,4 +1,17 @@
 .product-manager {
+  .nav-products-actions {
+    margin: 1rem 0;
+    display: flex;
+    justify-content: flex-end;
+    .list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      gap: 1rem;
+    }
+  }
+
   table {
     .th-actions {
       width: 200px;

webseite/frontend/index.html

@@ -23,6 +23,31 @@
           <figcaption>The Donkey Coders</figcaption>
         </figure>
       </div>
+
+      <section class="splide my-slider" aria-label="Splide Basic HTML Example">
+        <div class="splide__track">
+          <ul class="splide__list">
+            <li class="splide__slide">
+              <figure class="splider-content">
+                <img src="/assets/img/slider/slide-01.webp" alt="slide-image-1" />
+                <figcaption>Slide 01</figcaption>
+              </figure>
+            </li>
+            <li class="splide__slide">
+              <figure class="splider-content">
+                <img src="/assets/img/slider/slide-02.webp" alt="slide-image-2" />
+                <figcaption>Slide 02</figcaption>
+              </figure>
+            </li>
+            <li class="splide__slide">
+              <figure class="splider-content">
+                <img src="/assets/img/slider/slide-03.webp" alt="slide-image-3" />
+                <figcaption>Slide 03</figcaption>
+              </figure>
+            </li>
+          </ul>
+        </div>
+      </section>
     </header>
     <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
     <nav class="menu-main">

webseite/frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@splidejs/splide": "^4.1.4",
         "bootstrap": "^5.3.8",
         "toastify-js": "^1.12.0"
       },
@@ -799,6 +800,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@splidejs/splide": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz",
+      "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==",
+      "license": "MIT"
+    },
     "node_modules/@types/cors": {
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",

webseite/frontend/package.json

@@ -22,6 +22,7 @@
     "sass": "^1.101.3"
   },
   "dependencies": {
+    "@splidejs/splide": "^4.1.4",
     "bootstrap": "^5.3.8",
     "toastify-js": "^1.12.0"
   }

webseite/frontend/projects/product-manager.html

@@ -51,18 +51,18 @@
         <div class="container">
           <nav class="nav-products-actions">
             <ul class="list">
-              <li>
-                <button class="btn btn-danger button-products-reset">
-                  <i class="fa-solid fa-box-archive"></i>
-                  Reset Products
-                </button>
-              </li>
               <li>
                 <button class="btn btn-dark button-products-save">
                   <i class="fa-solid fa-hard-drive"></i>
                   Save Products
                 </button>
               </li>
+              <li>
+                <button class="btn btn-danger button-products-reset">
+                  <i class="fa-solid fa-box-archive"></i>
+                  Reset Products
+                </button>
+              </li>
             </ul>
           </nav>