Home Page

+ Added Information
+ First and Second Entrie

GUI/src/Layout.vue

@@ -19,7 +19,11 @@ function toggleDrawer() {
 }
 
 onMounted(() => {
-  theme.change(localStorage.getItem('theme') || 'light');
+  theme.change(
+    localStorage.getItem('theme') || window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light',
+  );
   showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
 });
 </script>
@@ -40,7 +44,9 @@ onMounted(() => {
         <v-app-bar-nav-icon @click="toggleDrawer()"></v-app-bar-nav-icon>
       </template>
 
-      <v-app-bar-title class="title"> Judoteam - Stadtlohn </v-app-bar-title>
+      <v-app-bar-title class="title" @click="$router.push({ name: 'Home' })"
+        ><span class="pointer">Judoteam - Stadtlohn</span></v-app-bar-title
+      >
 
       <v-tooltip>
         <template #activator="{ props }">

GUI/src/components/CarouseWithTitle.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+    image: String,
+    text: String,
+    noCover: Boolean,
+})
+</script>
+
+<template>
+  <v-carousel-item :src="props.image" :cover="!props.noCover">
+    <template #default>
+      <div class="text-center">
+        <p class="text-h CarouselWithTitleText">{{ text }}</p>
+      </div>
+    </template>
+  </v-carousel-item>
+</template>
+
+<style scoped>
+.CarouselWithTitleText{
+    background-color: rgb(0, 0, 0, 0.65);
+    color: white;
+    display: inline-block;
+    padding: 2px;
+    padding-right: 10px;
+    padding-left: 10px;
+    border-radius: 0px 0px 8px 8px;
+}
+</style>

GUI/src/components/HomeEntrie.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: String,
+  noMarginTop: Boolean,
+  extraBesideText: {
+    type: Boolean,
+    default: false,
+  },
+  extraWidthPercent: {
+    type: Number,
+    default: 30,
+  },
+  titleInSplitRight: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const normalizedExtraWidth = computed(() => {
+  const width = Number.isFinite(props.extraWidthPercent)
+    ? props.extraWidthPercent
+    : 30;
+
+  return Math.min(100, Math.max(0, width));
+});
+
+const textWidthPercent = computed(() => 100 - normalizedExtraWidth.value);
+
+const extraWidthStyle = computed(() => ({
+  flexBasis: `${normalizedExtraWidth.value}%`,
+  maxWidth: `${normalizedExtraWidth.value}%`,
+}));
+
+const textWidthStyle = computed(() => ({
+  flexBasis: `${textWidthPercent.value}%`,
+  maxWidth: `${textWidthPercent.value}%`,
+}));
+</script>
+
+<template>
+  <div :class="{ 'mt-5': !noMarginTop }">
+    <template v-if="props.extraBesideText">
+      <h3 v-if="!props.titleInSplitRight" class="text-h4 font-weight-bold">
+        {{ props.title }}
+      </h3>
+      <div class="entry-content entry-content--split">
+        <div class="entry-content__extra" :style="extraWidthStyle">
+          <slot name="extra" />
+        </div>
+        <div class="entry-content__text" :style="textWidthStyle">
+          <h3
+            v-if="props.titleInSplitRight"
+            class="text-h4 font-weight-bold"
+          >
+            {{ props.title }}
+          </h3>
+          <p class="text-subtitle-1">
+            <slot name="text" />
+          </p>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <h3 class="text-h4 font-weight-bold">{{ props.title }}</h3>
+      <p class="text-subtitle-1">
+        <slot name="text" />
+      </p>
+      <slot name="extra" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.entry-content {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.entry-content--split {
+  align-items: center;
+}
+
+.entry-content__extra,
+.entry-content__text {
+  min-width: 0;
+}
+
+.entry-content__extra {
+  flex: 0 0 auto;
+}
+
+.entry-content__text {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 600px) {
+  .entry-content--split {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .entry-content__extra,
+  .entry-content__text {
+    flex-basis: auto !important;
+    max-width: 100% !important;
+    width: 100%;
+  }
+}
+</style>

GUI/src/css/global.css

@@ -2,10 +2,7 @@
   font-weight: 600;
 }
 
-.whiteTransp {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.blackTransp {
-  background-color: rgb(0, 0, 0, 0.5);
-}
+.pointer{
+  cursor: pointer;
+  user-select: none;
+}

GUI/src/routes/Home.vue

@@ -1,22 +1,60 @@
 <script setup lang="ts">
-import { useTheme } from 'vuetify';
-
-const theme = useTheme();
+import CarouseWithTitle from '@/components/CarouseWithTitle.vue';
+import HomeEntrie from '@/components/HomeEntrie.vue';
 </script>
 
 <template>
   <v-container fluid>
-    <v-img
-      class="rounded-lg"
-      height="30vh"
-      src="/static/images/house/front.jpg"
-      cover
-      :gradient="
-        theme.name.value === 'dark'
-          ? 'rgba(0,0,0,0.5), rgba(0,0,0,0.5)'
-          : 'rgba(255,255,255,0.5), rgba(255,255,255,0.5)'
-      "
-    />
+    <v-img class="rounded-lg" height="40vh" src="/static/images/startPage.png" cover />
+
+    <main>
+      <v-container
+        id="main"
+        :style="{
+          maxWidth: $vuetify.display.smAndDown ? '100vw' : '60vw',
+        }"
+        fluid
+      >
+        <home-entrie title="Herzlich Willkommen!">
+          <template #text>
+            <b>Schön, dass du den Weg zu uns gefunden hast!</b> Egal, ob du schon lange dabei bist
+            oder das erste Mal von Judo hörst – wir freuen uns, dich bald (wieder) in unserem
+            <b>Judozentrum</b>
+            (Dojo) begrüßen zu dürfen.
+          </template>
+        </home-entrie>
+        <home-entrie
+          title="Was ist Judo?"
+          extra-beside-text
+          :extra-width-percent="50"
+          title-in-split-right
+        >
+          <template #text>
+            Judo ist eine Sportart, welche den ganzen Körper fordert, fördert und beansprucht. Es
+            werden also <b>sämtliche Muskelgruppen, sowie das Köpfchen bei uns trainiert. </b>
+            <b>Judo bedeutet übersetzt “der sanfte Weg”.</b> Daraus lässt sich ja schon erahnen,
+            dass Judo eine Kampfsportart ist bei der das "Schlagen" oder "Treten" des Gegners
+            verboten ist. Beim Judo beschränkt man sich rein auf das <b>Werfen</b>,
+            <b>fixieren am Boden</b>, <b>Hebeln</b> und <b>Hebeln</b> (nur für die älteren) des
+            Partners/Gegners.
+          </template>
+
+          <template #extra>
+            <v-carousel
+              show-arrows="hover"
+              hide-delimiter-background
+              class="rounded-lg"
+              cycle
+              interval="6000"
+            >
+              <carouse-with-title text="Werfen" image="/static/images/whatsJudo/throw.jpg"/>
+              <carouse-with-title text="fixieren am Boden" image="/static/images/whatsJudo/hold.jpg"/>
+              <carouse-with-title text="Trainieren aller Muskelgruppen" image="/static/images/whatsJudo/stabil.jpg"/>
+            </v-carousel>
+          </template>
+        </home-entrie>
+      </v-container>
+    </main>
   </v-container>
 </template>