This commit is contained in:
2026-04-26 22:02:24 +02:00
commit 73442783b7
1470 changed files with 43422 additions and 0 deletions

View File

@@ -0,0 +1,111 @@
<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import {ref} from "vue";
async function loadImage(path: string) {
try{
const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
headers: {
"Accept":"image/png"
}
});
if(!response.ok) return false;
const blob = await response.blob();
return URL.createObjectURL(blob);
}
catch(e){
console.warn(e);
}
}
loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
images.value[0]=url;
});
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
images.value[1]=url;
});
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
images.value[2]=url;
});
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
images.value[3]=url;
});
const images=ref([]);
</script>
<template>
<section
class="gallery09 cid-u6k7q0xbqP"
id="gallery-9-u6k7q0xbqP"
v-if="images[0]"
>
<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">
<RouterLink to="/galerie/doppelkopf"
><img :src="images[0]"
/></RouterLink>
</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">
<RouterLink to="/galerie/erntefest"
><img :src="images[1]"
/></RouterLink>
</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">
<RouterLink to="/galerie/fussball"
><img :src="images[2]"
/></RouterLink>
</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">
<RouterLink to="/galerie/osterfeuer"
><img :src="images[3]"
/></RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style></style>

View File

@@ -0,0 +1,162 @@
<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib";
import Modal from "../Modal.vue";
import MarkdownRender from "vue-renderer-markdown";
import "katex/dist/katex.min.css";
import Forms from "./Forms.vue";
import { ref } from "vue";
import { EventType, MyEvent } from "../../dto/event.dto.js";
const initdone=ref(false);
const events = ref<MyEvent[]>([]);
const openedModals=ref<number[]>([]);
const modaltypes=[EventType.html,EventType.markdown];
async function init() {
events.value=(await RitzenbergenLib.graphqlClient.request<{events: MyEvent[]}>
(`{
events {
id
eventname
type
minitext
datum
content
link
foto
formular
}
}`)).events;
console.log(events.value);
}
init().then(()=>{
initdone.value=true;
});
function format_date(date: string){
return new Date(date).toDateString();
}
function vorschautext(str: string){
return str;
}
</script>
<template>
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG" v-if="initdone">
<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" v-if="events">
<!-- Events -->
<h5 class="align-center" v-if="events.length == 0">
Es stehen keine Events an.
</h5>
<div
v-for="(event, i) in events"
:key="i"
class="item features-image col-12 col-md-6 col-lg-3"
:class="{ active: i % 4 == 0 }"
>
<Modal
v-show="
openedModals.includes(event.id) &&
modaltypes.includes(event.type)
"
@closemodal="
openedModals.splice(
openedModals.indexOf(event.id),
1
)
"
>
<MarkdownRender
v-if="event.type == EventType.markdown"
:content="event.content"
/>
<div v-else v-html="event.content"></div>
<Forms v-if="event.formular" :formid="event.formular"/>
</Modal>
<div class="item-wrapper">
<div class="item-img mb-3">
<img :src="RitzenbergenLib.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.minitext) }}
</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'"
@click="galerie(event.content)"
>Fotos ansehen</span
>
<span v-else>Mehr</span>
</button></a
>
</div>
</div>
</div>
</div>
</div>
<div class="row" v-else>
<h1>Keine Internetverbindung!</h1>
</div>
</div>
</section>
</template>
<style></style>

View File

@@ -0,0 +1,184 @@
<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib";
import FormResults from "../FormResults.vue";
import { ref } from "vue";
import Modal from "../Modal.vue";
import { Formular } from "../../dto/formular.dto";
async function init() {
forms.value=await RitzenbergenLib.graphqlClient.request<{formulare: Formular[] }>(`
{
formulare {
id
name
minitext
ispublic
fields {
id
name
displayname
displayvalue
placeholder
type
title
required
maxlength
min
max
checked
value
}
}
}
`
).then(data=>data.formulare);
console.log(forms.value);
}
const forms = ref([] as Formular[]);
const props=defineProps({
formid: {
type: [Number, null],
required: false,
default: null
}
});
init();
function submit($event: Event) {
const url = new URL(
RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
);
const formData = new FormData(<HTMLFormElement>$event.target);
fetch(url.toString(), {
method: "POST",
body: formData
}).then(() => {
init();
values.value={};
});
}
const modalOpened=ref<boolean>(false);
const openedForm=ref<Formular|null>(null);
function openModal(form: Formular){
openedForm.value=form;
modalOpened.value=true;
}
const values=ref({});
</script>
<template>
<Modal v-if="openedForm && openedForm.ispublic" v-show="modalOpened" @closemodal="modalOpened=false">
<FormResults v-if="modalOpened" :form="openedForm"/>
</Modal>
<section ref="anmeldeformular" id="anmeldeformular">
<section class="form5 cid-u6k7q0BfGa">
<div class="container" v-for="(form, i) in forms" :key="i">
<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>{{ form.name }}</strong>
</h3>
<br />
<h5 style="text-align: center">
<b @click="openModal(form)" class="fakelink" v-if="form.ispublic">{{ form.minitext }}
</b> <b v-else>{{ form.minitext }}</b> <br />
</h5>
<br />
</div>
</div>
</div>
<div class="row justify-content-center">
<div
class="col-lg-8 mx-auto mbr-form"
data-form-type="formoid"
>
<form
class="mbr-form form-with-styler"
data-form-title="Form Name"
:data-formid="form.id"
:data-i="i"
@submit.prevent="submit"
>
<div v-for="(field, j) in form.fields" :key="j">
<label
v-if="field.placeholder == null"
:for="'field-' + field.id"
>
{{
field.displayvalue ?? field.displayname ?? field.name
}}:
<span v-if="field.type == 'range'"
><br />{{ values[field.id] }}</span
>
</label>
<FormKit
v-if="field.type != 'textarea'"
:id="'field-' + field.id"
:type="field.type"
:name="field.name"
:placeholder="field.placeholder"
:required="field.required"
:maxlength="field.maxlength"
:min="field.min"
:max="field.max"
:checked="field.checked"
:title="field.title"
:value="field.value"
v-model="values[field.id]"
/>
<textarea
v-else
:id="'field-' + field.id"
:name="field.name"
:placeholder="field.placeholder"
:required="field.required"
:maxlength="field.maxlength"
:title="field.title"
:value="field.value"
></textarea>
</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>
<input type="hidden" :value="form.id" name="internalformid" />
</form>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
</section>
</section>
</template>
<style scoped>
label {
margin-right: 10px;
}
.fakelink{
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,60 @@
<template>
<div class="parallax-wrapper">
<div
class="jarallax"
ref="parallaxEl"
data-speed="0.5"
>
<div class="jarallax-img" style="background-image: url('https://ritzenbergen.de/Fotos/erntefest2011.jpg');">
</div>
<div class="container content cid-u6k7q0zosO">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import { jarallax } from 'jarallax';
import 'jarallax/dist/jarallax.css'; // optional, falls du Styles möchtest
export default {
name: 'ParallaxSection',
mounted() {
jarallax(this.$refs.parallaxEl);
},
beforeDestroy() {
jarallax(this.$refs.parallaxEl, 'destroy');
},
};
</script>
<style scoped>
.parallax-wrapper {
overflow: hidden;
}
.jarallax-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
}
.container {
position: relative;
z-index: 1;
padding: 100px;
text-align: center;
}
slot{
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,82 @@
<script>
import Jarallax from './Jarallax.vue';
export default {
components: {
Jarallax,
},
}
</script>
<template>
<Jarallax>
<div class="row justify-content-center">
<div class="card col-12 col-md-12 col-lg-10">
<div class="card-wrapper">
<div class="card-box align-center">
<h1 class="card-title mbr-fonts-style mb-4 display-1">
<strong style="color: black;">Entdecke die Umgebung</strong>
</h1>
<p class="mbr-text mbr-fonts-style mb-4 display-7">
Hier findest du nützliche Links aus der Umgebung
</p>
<section class="umgebung">
<div>
<ul>
<b>
<li><a href="https://alt-blender.de" target="_blank">alt-blender.de - Historische Fotos und
Dokumente aus
Blender und umzu</a></li>
</b>
<b>
<li><a href="https://www.verden.de/" target="_blank">Verden/Aller</a></li>
</b>
<b>
<li><a href="https://www.langwedel.de/" target="_blank">Flecken Langwedel</a></li>
</b>
<b>
<li><a href="https://www.feuerwehr-blender.de/" target="_blank">Freiwillige Feuerwehr
Blender</a></li>
</b>
<b>
<li><a href="https://www.browiede.de/" target="_blank">Landgasthaus Browiede</a></li>
</b>
<b>
<li><a href="https://www.mittelweserverband.de/" target="_blank">Mittelweserverband</a></li>
</b>
<b>
<li><a href="http://angelverein-doerverden.de/" target="_blank">Angelverein Dörverden</a></li>
</b>
<b>
<li><a href="https://www.theater-holtum.de/" target="_blank">Theatergruppe des gemischten
Chores "Polyhymnia"
Holtum Marsch</a></li>
</b>
<b>
<li><a href="https://www.thedinghausen.de/" target="_blank">Samtgemeinde Thedinghausen</a>
</li>
</b>
<b>
<li><a href="https://www.tsv-blender.de/">TSV Blender</a></li>
</b>
<b>
<li><a href="https://tsvintschede.de-zign.de/">TSV "Weserstrand" Intschede</a></li>
</b>
<b>
<li><a href="https://www.intscheder-bauernhofeis.de/">Intscheder Bauernhofeis</a></li>
</b>
</ul>
</div>
</section>
</div>
</div>
</div>
</div>
</Jarallax>
</template>
<style>
li{
list-style: none;
}
</style>

View File

@@ -0,0 +1,43 @@
<script lang="ts">
export default {
}
</script>
<template>
<section
class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
id="hero-17-u6k7q0xIhk"
>
<div
class="mbr-overlay"
style="opacity: 0.3; background-color: rgb(0, 0, 0)"
></div>
<div class="container-fluid">
<div class="row">
<div class="content-wrap col-12 col-md-10">
<h1
class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
>
<strong>Willkommen auf ritzenbergen.de</strong>
</h1>
<p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
Dies ist eine private Homepage über das Dorfleben in Amedorf und
Ritzenbergen
</p>
<div class="mbr-section-btn">
<a
class="btn btn-white-outline display-7"
href="#gallery-9-u6k7q0xbqP"
>Erkunden</a
>
</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
</style>

View File

@@ -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>