Auslagerung in Components, Verbesserung Embla

2025-04-16 19:19:41 +02:00
parent 3057988eb0
commit ad8ce7fb67
9 changed files with 442 additions and 347 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
      "dependencies": {
        "@tauri-apps/api": "^2",
        "@tauri-apps/plugin-opener": "^2",
-        "embla-carousel-autoplay": "^8.6.0",
        "embla-carousel-vue": "^8.6.0",
        "jarallax": "^2.2.1",
        "jquery": "^3.7.1",
@@ -1277,15 +1276,6 @@
      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
      "license": "MIT"
    },
-    "node_modules/embla-carousel-autoplay": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz",
-      "integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "embla-carousel": "8.6.0"
-      }
-    },
    "node_modules/embla-carousel-reactive-utils": {
      "version": "8.6.0",
      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
@@ -1367,6 +1357,21 @@
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "license": "MIT"
    },
+    "node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1496,6 +1501,19 @@
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
      "license": "ISC"
    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -2013,6 +2031,23 @@
        "node": ">=16.0.0"
      }
    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
    "node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2048,15 +2083,18 @@
      "license": "MIT"
    },
    "node_modules/vite": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
-      "integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.0.tgz",
+      "integrity": "sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.25.0",
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2",
        "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.12"
      },
      "bin": {
        "vite": "bin/vite.js"
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
  "dependencies": {
    "@tauri-apps/api": "^2",
    "@tauri-apps/plugin-opener": "^2",
-    "embla-carousel-autoplay": "^8.6.0",
    "embla-carousel-vue": "^8.6.0",
    "jarallax": "^2.2.1",
    "jquery": "^3.7.1",
--- a/src/Bilderbuch.vue
+++ b/src/Bilderbuch.vue
@@ -0,0 +1,90 @@
+<script lang="ts">
+import RitzenbergenLib from "./ritzenbergenlib.ts";
+export default {
+    data() {
+        return {
+            RitzenbergenLib
+        };
+    }
+};
+</script>
+<template>
+  <section class="gallery09 cid-u6k7q0xbqP" id="gallery-9-u6k7q0xbqP">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-12 col-lg-4 main-text">
+          <div class="">
+            <h5 class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2">
+              <strong>Bilderbuch Ritzenbergen</strong>
+            </h5>
+            <h6
+              class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7"
+            >
+              Klicke auf ein Bild um in unsere Galerie zu gelangen. Die Bilder
+              sind nach Jahreszahl und Kategorie geordnet.
+            </h6>
+          </div>
+        </div>
+        <div class="col-lg-8 side-features row">
+          <div class="item features-image col-12 col-md-6 col-lg-6 active">
+            <div class="item-wrapper">
+              <div class="item-img">
+                <a href="./galerie.php#doppelkopf"
+                  ><img
+                    :src="
+                      RitzenbergenLib.api(
+                        'randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3'
+                      )
+                    "
+                /></a>
+              </div>
+            </div>
+          </div>
+          <div class="item features-image col-12 col-md-6 col-lg-6 active">
+            <div class="item-wrapper">
+              <div class="item-img">
+                <a href="./galerie.php#erntefest"
+                  ><img
+                    :src="
+                      RitzenbergenLib.api(
+                        'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3'
+                      )
+                    "
+                /></a>
+              </div>
+            </div>
+          </div>
+          <div class="item features-image col-12 col-md-6 col-lg-6 active">
+            <div class="item-wrapper">
+              <div class="item-img">
+                <a href="./galerie.php#fussballturnier"
+                  ><img
+                    :src="
+                      RitzenbergenLib.api(
+                        'randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3'
+                      )
+                    "
+                /></a>
+              </div>
+            </div>
+          </div>
+          <div class="item features-image col-12 col-md-6 col-lg-6 active">
+            <div class="item-wrapper">
+              <div class="item-img">
+                <a href="./galerie.php#osterfeuer"
+                  ><img
+                    :src="
+                      RitzenbergenLib.api(
+                        'randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3'
+                      )
+                    "
+                /></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style></style>
--- a/src/Embla.vue
+++ b/src/Embla.vue
@@ -1,15 +1,12 @@
 <script setup>
 import emblaCarouselVue from "embla-carousel-vue";
-import Autoplay from "embla-carousel-autoplay";
 import RitzenbergenLib from "./ritzenbergenlib.ts";
 import { onMounted, ref } from "vue";
 import EmblaItem from "./EmblaItem.vue";

 const emblaApi = ref();

-const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true }, [
-  Autoplay({ delay: 3000 }),
-]);
+const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true });

 onMounted(() => {
  emblaApi.value = emblaInstance.value;
@@ -22,40 +19,19 @@ const prev = () => {
 const next = () => {
  emblaApi.value?.scrollNext();
 };
+
+defineProps({
+  src: {
+    type: Array,
+    required: true,
+  },
+});
 </script>

 <template>
  <div class="embla" ref="emblaRef">
    <div class="embla__container">
-      <EmblaItem
-        :src="
-          RitzenbergenLib.api(
-            'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
-          )
-        "
-      />
-      <EmblaItem
-        :src="
-          RitzenbergenLib.api(
-            'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
-          )
-        "
-      />
-      <EmblaItem
-        :src="
-          RitzenbergenLib.api(
-            'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
-          )
-        "
-      />
-      <EmblaItem
-        :src="
-          RitzenbergenLib.api(
-            'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
-          )
-        "
-      />
-      <EmblaItem src="http://ritzenbergen.de/Fotos/hauptfoto.jpg" />
+      <EmblaItem v-for="el in src" :src="el" />
    </div>
    <button class="embla__button embla__button--prev" @click="prev">
      <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
--- a/src/Events.vue
+++ b/src/Events.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+import RitzenbergenLib from "./ritzenbergenlib.ts";
+import striptags from "striptags";
+import moment, { Moment } from "moment";
+import Modal from "./Modal.vue";
+export default {
+  data() {
+    let openedModals: number[] = [];
+    return {
+      openedModals,
+      modaltypes: ["text", "html"],
+      RitzenbergenLib,
+    };
+  },
+  computed: {
+    events() {
+      return [
+        {
+          id: 0,
+          eventname: "Eventname",
+          datum: "2009-04-06",
+          type: "text",
+          content: "<h1>Test</h1>",
+          link: undefined,
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 1,
+          eventname: "Link",
+          datum: "2009-04-06",
+          type: "link",
+          content: "<h1>Testlink</h1>",
+          link: "#/test",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 2,
+          eventname: "Download-Link",
+          datum: "2009-04-06",
+          type: "dlink",
+          content: "<h1>Testlink2</h1>",
+          link: "/",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 3,
+          eventname: "Fotos endlich online!",
+          datum: "2009-04-06",
+          type: "fotos",
+          content: "Fotos vom Erntefest 2011",
+          link: "erntefest/2011",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 4,
+          eventname: "Eventname",
+          datum: "2009-04-06",
+          type: "html",
+          content: "<h1>Test2</h1>",
+          link: undefined,
+          foto: "erntefest/2011/pic08.jpg",
+        },
+      ];
+    },
+  },
+  methods:{
+    vorschautext(content:string) {
+        let stripped=striptags(content);
+        let vorschaulen=30;
+        if(stripped.length>vorschaulen){
+            return stripped.substring(0,vorschaulen)+"...";
+        }else{
+            return stripped;
+        }
+    },
+    format_date(date: string){
+        let mymoment:Moment=moment();
+        mymoment.set("year",parseInt(date.split("-")[0]));
+        mymoment.set("month",parseInt(date.split("-")[2])-1);
+        mymoment.set("day",parseInt(date.split("-")[1]));
+        return mymoment.format("DD.MM.YYYY")
+    }
+  },
+    components: {
+        Modal,
+    },
+};
+</script>
+<template>
+  <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
+    <div class="container-fluid">
+      <div class="row justify-content-center mb-5">
+        <div class="col-12 content-head">
+          <div class="mbr-section-head">
+            <h4
+              class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+            >
+              <strong>Termine & Neuigkeiten</strong>
+            </h4>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <!-- Events -->
+
+        <h5 class="align-center" v-if="events.length == 0">
+          Es stehen keine Events an.
+        </h5>
+
+        <div
+          class="item features-image col-12 col-md-6 col-lg-3"
+          :class="{ active: i % 4 == 0 }"
+          v-for="(event, i) in events"
+        >
+          <Modal
+            v-show="
+              openedModals.includes(event.id) && modaltypes.includes(event.type)
+            "
+            @closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)"
+            :content="event.content"
+          ></Modal>
+          <div class="item-wrapper">
+            <div class="item-img mb-3">
+              <img :src="RitzenbergenLib.get_img(event.foto)" />
+            </div>
+            <div class="item-content align-left">
+              <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
+                <strong
+                  ><a class="text-black fw-bold" :data-id="event.id">{{
+                    event.eventname
+                  }}</a></strong
+                >
+              </h6>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ format_date(event.datum) }}
+              </p>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ vorschautext(event.content) }}
+              </p>
+              <div class="mbr-section-btn item-footer">
+                <a
+                  :download="event.type == 'dlink' ? event.link : undefined"
+                  :href="event.link"
+                  ><button
+                    class="btn item-btn btn-primary display-7"
+                    :data-id="event.id"
+                    @click="openedModals.push(event.id)"
+                  >
+                    <span v-if="event.type == 'link'">Einladung öffnen</span>
+                    <span v-else-if="event.type == 'dlink'"
+                      >Einladung runterladen</span
+                    >
+                    <span v-else-if="event.type == 'fotos'">Fotos ansehen</span>
+                    <span v-else>Mehr</span>
+                  </button></a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style></style>
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -0,0 +1,69 @@
+<script>
+export default {
+    }
+</script>
+<template>
+<section id="anmeldeformular">
+
+<section class="form5 cid-u6k7q0BfGa">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-12 content-head">
+        <div class="mbr-section-head mb-5">
+          <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+            <strong>Überschrift</strong>
+          </h3><br>
+          <h5 style="text-align: center;"><b></b> <br>
+            Inhalt</h5><br>
+          if public
+
+
+            <div class="modal-container">
+              <div class="modal">
+
+                <div class="modal-content">
+                  <span class="closeBtn" style="cursor: pointer;">x</span>
+                  <h1>Modal-Überschrift</h1>
+                  Ergebnisse
+                </div>
+
+              </div>
+              <br><br>
+            </div>
+            else
+            <p style="text-align: center;">Minitext<br><br>
+              
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
+        <form action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
+          data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
+            data-form-email="true" value="">
+          <div class="dragArea row">
+            <div class="col-md col-sm-12 form-group mb-3" data-for="name">
+              <input type="text" maxlength="128" name="name" placeholder="Label1"
+                data-form-field="name" class="form-control" value="" id="name-form02-0">
+            </div>
+
+            <div class="col-12 form-group mb-3" data-for="textarea">
+              <input type="text" name="textarea" maxlength="128" placeholder="Label2"
+                data-form-field="textarea" class="form-control" id="textarea-form02-0">
+            </div>
+            <div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn">
+              <button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
+            </div>
+          </div>
+          <input type="hidden" value="<?php echo $id; ?>" name="id">
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+</section>
+</template>
+<style>
+
+</style>
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -1,12 +1,14 @@
 <script lang="ts">
 import Navbar from "./Navbar.vue";
-import striptags from "striptags";
-import moment, { Moment } from "moment";
 import Modal from "./Modal.vue";
 import Embla from "./Embla.vue";
 import Umgebung from "./Umgebung.vue";
 import Footer from "./Footer.vue";
 import RitzenbergenLib from "./ritzenbergenlib.ts";
+import Willkommen from "./Willkommen.vue";
+import Bilderbuch from "./Bilderbuch.vue";
+import Forms from "./Forms.vue";
+import Events from "./Events.vue";

 export default {
  components: {
@@ -14,85 +16,19 @@ export default {
    Modal,
    Embla,
    Umgebung,
-    Footer
-  },
-  computed: {
-    events() {
-      return [
-        {
-            id: 0,
-            eventname:"Eventname",
-            datum: "2009-04-06",
-            type: "text",
-            content: "<h1>Test</h1>",
-            link: undefined,
-            foto: "erntefest/2011/pic08.jpg"
-        },
-        {
-            id: 1,
-            eventname:"Link",
-            datum: "2009-04-06",
-            type: "link",
-            content: "<h1>Testlink</h1>",
-            link: "#/test",
-            foto: "erntefest/2011/pic08.jpg"
-        },
-        {
-            id: 2,
-            eventname:"Download-Link",
-            datum: "2009-04-06",
-            type: "dlink",
-            content: "<h1>Testlink2</h1>",
-            link: "/",
-            foto: "erntefest/2011/pic08.jpg"
-        },
-        {
-            id: 3,
-            eventname:"Fotos endlich online!",
-            datum: "2009-04-06",
-            type: "fotos",
-            content: "Fotos vom Erntefest 2011",
-            link: "erntefest/2011",
-            foto: "erntefest/2011/pic08.jpg"
-        },
-        {
-            id: 4,
-            eventname:"Eventname",
-            datum: "2009-04-06",
-            type: "html",
-            content: "<h1>Test2</h1>",
-            link: undefined,
-            foto: "erntefest/2011/pic08.jpg"
-        }
-      ];
-    },
-  },
-  methods:{
-    vorschautext(content:string) {
-        let stripped=striptags(content);
-        let vorschaulen=30;
-        if(stripped.length>vorschaulen){
-            return stripped.substring(0,vorschaulen)+"...";
-        }else{
-            return stripped;
-        }
-    },
-    format_date(date: string){
-        let mymoment:Moment=moment();
-        mymoment.set("year",parseInt(date.split("-")[0]));
-        mymoment.set("month",parseInt(date.split("-")[2])-1);
-        mymoment.set("day",parseInt(date.split("-")[1]));
-        return mymoment.format("DD.MM.YYYY")
-    }
+    Footer,
+    Willkommen,
+    Bilderbuch,
+    Forms,
+    Events
  },
+
  data() {
-    let openedModals: number[] = [];
    return {
-      openedModals,
-      modaltypes: ["text", "html"],
-      RitzenbergenLib
-    }
+      RitzenbergenLib,
+    };
  },
+  
 };
 </script>

@@ -145,192 +81,25 @@ export default {
      </div>
    </div>
  </section>
-  <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
-    <div class="container-fluid">
-      <div class="row justify-content-center mb-5">
-        <div class="col-12 content-head">
-          <div class="mbr-section-head">
-            <h4
-              class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
-            >
-              <strong>Termine & Neuigkeiten</strong>
-            </h4>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <!-- Events -->
+  <Events/>

-        <h5 class="align-center" v-if="events.length == 0">
-          Es stehen keine Events an.
-        </h5>
+  <Forms/>
      

-
-        <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
-          <Modal v-show="openedModals.includes(event.id)&&modaltypes.includes(event.type)" @closemodal="openedModals.splice(openedModals.indexOf(event.id),1)" :content="event.content"></Modal>
-          <div class="item-wrapper">
-            <div class="item-img mb-3">
-              <img :src="RitzenbergenLib.get_img(event.foto)" />
-            </div>
-            <div class="item-content align-left">
-              <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
-                <strong
-                  ><a
-                    class="text-black fw-bold"
-                    :data-id="event.id"
-                    >{{ event.eventname }}</a
-                  ></strong
-                >
-              </h6>
-              <p class="mbr-text mbr-fonts-style mb-3 display-7">
-                {{ format_date(event.datum) }}
-              </p>
-              <p class="mbr-text mbr-fonts-style mb-3 display-7">
-                {{ vorschautext(event.content) }}
-              </p>
-              <div class="mbr-section-btn item-footer">
-                <a
-                :download="event.type=='dlink' ? event.link : undefined"
-                :href="event.link"
-                    ><button
-                  class="btn item-btn btn-primary display-7"
-                  :data-id="event.id"
-                  @click="openedModals.push(event.id);"
-                >
-                  <span v-if="event.type=='link'">Einladung öffnen</span>
-                  <span v-else-if="event.type=='dlink'">Einladung runterladen</span>
-                  <span v-else-if="event.type=='fotos'">Fotos ansehen</span>
-                  <span v-else>Mehr</span>
-                </button></a>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        </div>
-    </div>
-  </section>
-
-  <section id="anmeldeformular">
-
-      <section class="form5 cid-u6k7q0BfGa">
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-12 content-head">
-              <div class="mbr-section-head mb-5">
-                <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
-                  <strong>Überschrift</strong>
-                </h3><br>
-                <h5 style="text-align: center;"><b></b> <br>
-                  Inhalt</h5><br>
-                if public
-
-
-                  <div class="modal-container">
-                    <div class="modal">
-
-                      <div class="modal-content">
-                        <span class="closeBtn" style="cursor: pointer;">x</span>
-                        <h1>Modal-Überschrift</h1>
-                        Ergebnisse
-                      </div>
-
-                    </div>
-                    <br><br>
-                  </div>
-                  else
-                  <p style="text-align: center;">Minitext<br><br>
-                    
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="row justify-content-center">
-            <div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
-              <form action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
-                data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
-                  data-form-email="true" value="">
-                <div class="dragArea row">
-                  <div class="col-md col-sm-12 form-group mb-3" data-for="name">
-                    <input type="text" maxlength="128" name="name" placeholder="Label1"
-                      data-form-field="name" class="form-control" value="" id="name-form02-0">
-                  </div>
-
-                  <div class="col-12 form-group mb-3" data-for="textarea">
-                    <input type="text" name="textarea" maxlength="128" placeholder="Label2"
-                      data-form-field="textarea" class="form-control" id="textarea-form02-0">
-                  </div>
-                  <div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn">
-                    <button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
-                  </div>
-                </div>
-                <input type="hidden" value="<?php echo $id; ?>" name="id">
-              </form>
-            </div>
-          </div>
-        </div>
-      </section>
-      
-
-      <section class="gallery09 cid-u6k7q0xbqP" id="gallery-9-u6k7q0xbqP">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-12 col-md-12 col-lg-4 main-text">
-          <div class="">
-            <h5 class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2">
-              <strong>Bilderbuch Ritzenbergen</strong>
-            </h5>
-            <h6 class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7">
-              Klicke auf ein Bild um in unsere Galerie zu gelangen. Die Bilder sind nach Jahreszahl und Kategorie
-              geordnet.
-            </h6>
-          </div>
-        </div>
-        <div class="col-lg-8 side-features row">
-          <div class="item features-image col-12 col-md-6 col-lg-6 active">
-            <div class="item-wrapper">
-              <div class="item-img">
-                <a href="./galerie.php#doppelkopf"><img
-                    :src="RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3')"></a>
-              </div>
-            </div>
-          </div>
-          <div class="item features-image col-12 col-md-6 col-lg-6 active">
-            <div class="item-wrapper">
-              <div class="item-img">
-                <a href="./galerie.php#erntefest"><img
-                    :src="RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3')"></a>
-              </div>
-            </div>
-          </div>
-          <div class="item features-image col-12 col-md-6 col-lg-6 active">
-            <div class="item-wrapper">
-              <div class="item-img">
-                <a href="./galerie.php#fussballturnier"><img
-                    :src="RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3')"></a>
-              </div>
-            </div>
-          </div>
-          <div class="item features-image col-12 col-md-6 col-lg-6 active">
-            <div class="item-wrapper">
-              <div class="item-img">
-                <a href="./galerie.php#osterfeuer"><img
-                    :src="RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3')"></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+      <Bilderbuch/>

  <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">

-          <Embla/>
+          <Embla :src="[
+            RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=5'),
+            RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=5'),
+            'http://ritzenbergen.de/Fotos/hauptfoto.jpg'
+          ]" />
        </div>
      </div>
    </div>
@@ -339,53 +108,15 @@ export default {



-  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-md-12 col-lg-10">
-          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
-            <strong>Willkommen in Ritzenbergen</strong>
-          </h3>
-          <p class="mbr-text mbr-fonts-style display-7">Ritzenbergen, ehemalig "Rikinburg" wurde nur ein einziges Mal im
-            Jahr 935 in der historischen Überlieferung erwähnt. In diesem Jahr wurde sie vom Edelherren Willarius der
-            Bremer Kirche geschenkt. Eine Identifikation dieser Burg mit einem auf einer Karte des Amtes Thedinghausen
-            von 1765 eingetragenen Hügel von etwa 150 m Durchmesser oberhalb eines alten Weserarms in Ritzenbergen ist
-            aber bisher nicht gesichert.</p>
-          <p class="mbr-text mbr-fonts-style display-7">Die Gemeinde Amedorf/Ritzenbergen wurde zusammen mit der
-            Gemeinde Holtum-Marsch im Jahr 1968 in die Gemeinde Blender eingegliedert.</p>
-          <p class="mbr-text mbr-fonts-style display-7">In der Galerie findest du viele Fotos aus den letzten Jahren.</p>
-        </div>
-      </div>
-    </div>
-  </section>
+  <Willkommen/>


-
-
-  <section class="gallery10 cid-u6k7q0zbuN" id="features-61-u6k7q0zbuN">
-    <div class="container-fluid">
-      <div class="loop-container">
-        <div class="item display-1" data-linewords="
-        Amedorf & Ritzenbergen *
-          Niedersachsen *
-          Gemeinde Blender *
-          Landkreis Verden *" data-direction="-1" data-speed="0.05">
-        </div>
-        <div class="item display-1" data-linewords="
-          Amedorf & Ritzenbergen *
-          Niedersachsen *
-          Gemeinde Blender *
-          Landkreis Verden *" data-direction="-1" data-speed="0.05">
-        </div>
-      </div>
-    </div>
-  </section>
-
+  <br>
+  <br>


  <Umgebung/>
  <Footer/>
-  </section>

 </template>

--- a/src/Willkommen.vue
+++ b/src/Willkommen.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+    export default {
+
+    }
+</script>
+<template>
+  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-12 col-lg-10">
+          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
+            <strong>Willkommen in Ritzenbergen</strong>
+          </h3>
+          <p class="mbr-text mbr-fonts-style display-7">Ritzenbergen, ehemalig "Rikinburg" wurde nur ein einziges Mal im
+            Jahr 935 in der historischen Überlieferung erwähnt. In diesem Jahr wurde sie vom Edelherren Willarius der
+            Bremer Kirche geschenkt. Eine Identifikation dieser Burg mit einem auf einer Karte des Amtes Thedinghausen
+            von 1765 eingetragenen Hügel von etwa 150 m Durchmesser oberhalb eines alten Weserarms in Ritzenbergen ist
+            aber bisher nicht gesichert.</p>
+          <p class="mbr-text mbr-fonts-style display-7">Die Gemeinde Amedorf/Ritzenbergen wurde zusammen mit der
+            Gemeinde Holtum-Marsch im Jahr 1968 in die Gemeinde Blender eingegliedert.</p>
+          <p class="mbr-text mbr-fonts-style display-7">In der Galerie findest du viele Fotos aus den letzten Jahren.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style scoped></style>
--- a/src/ritzenbergenlib.ts
+++ b/src/ritzenbergenlib.ts
@@ -1,10 +1,10 @@
 export default class RitzenbergenLib {
  static get_img(mypath: string) {
-    if(mypath.startsWith("/")) return "https://bilder.ritzenbergen.de"+mypath;
-    else return "https://bilder.ritzenbergen.de/"+mypath;
+    if(mypath.startsWith("/")) return "http://bilder.ritzenbergen.de"+mypath;
+    else return "http://bilder.ritzenbergen.de/"+mypath;
  }
  static api(path:string){
-    if(path.startsWith("/")) return "https://api.ritzenbergen.de"+path;
-    else return "https://api.ritzenbergen.de/"+path;
+    if(path.startsWith("/")) return "http://api.ritzenbergen.de"+path;
+    else return "http://api.ritzenbergen.de/"+path;
  }
 }