timeline staff

src/components/Navigation.vue

@@ -37,16 +37,40 @@ nav a, nav select {
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
+nav select{
+      width: 70px;
+      height: 40px;
+      font-size: 16px;
+      border-radius: 4px;
+      padding-left: 10px;
+      color: #fff;
 
+      border: 1px solid #767676;
+      background-color: transparent ;
+}
 nav a:first-of-type {
   border: 0;
 }
+
+/*select{
+      width: 70px;
+      height: 40px;
+      -moz-padding-start: calc(10px - 3px);
+      padding-left: 10px;
+      background-color: transparent ;
+      color: #fff;
+      font-family: 'Open Sans', sans-serif;
+      font-size: 16px;
+      border-radius: 4px;
+    }*/
 </style>
 
 <script lang="ts">
     import { useFooterLinksStore } from '@/stores/footer-content-pages'
+    import { useTimelineStore } from '@/stores/timeline'
     import {loadDynamicPages} from '@/router'
     import { useI18n } from 'vue-i18n'
+    import { useRoute } from 'vue-router'
 
     export default {
         name: 'Navigation',
@@ -54,37 +78,46 @@ nav a:first-of-type {
             return {
             links: [] as Array<any>,
             error: null as any,
-            footerLinksStroe: null as any
+            footerLinksStroe: null as any,
+
             }
         },
         setup(){
           const { t } = useI18n({
             inheritLocale: true
           })
+          const route = useRoute()
+
           return{
-            t
+            t,
+            route
           }
         },
         async mounted () {
           if(!this.footerLinksStroe){
             this.footerLinksStroe = useFooterLinksStore()
           }
-            
+
             this.links = await this.footerLinksStroe.getLinks(this.$i18n.locale)
         },
         methods:{
           async changeLocale(){
-            let locale = this.$i18n.locale
+            const locale = this.$i18n.locale
             loadDynamicPages(locale)
-            localStorage.setItem('lang',locale)
+            localStorage.setItem('lang', locale)
             if(!this.footerLinksStroe){
               this.footerLinksStroe = useFooterLinksStore()
             }
+            useTimelineStore().setLocale(locale)
+            const oldLink = this.footerLinksStroe.getLinkByLabel(this.route.name)
             this.links = await this.footerLinksStroe.getLinks(locale)
-            
+            const newLink = this.footerLinksStroe.getLinkByLabel(oldLink.localizations[0].Label)
+
+
+            setTimeout(() => {this.$router.push(newLink.page.path)}, 100)
           }
         }
-        
+
     }
 </script>
 

src/components/Timeline.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="timeline">
+        <div v-for="timeline in timelines" :class="`container ${timeline.posittion}`">
+            <div class="content">
+            <h2>{{timeline.label}}</h2>
+            <p>{{timeline.description}}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+   import { useTimelineStore } from '@/stores/timeline'
+   import { useI18n } from 'vue-i18n'
+
+    export default {
+        name: 'Timeline',
+        data () {
+            return {
+              timelines: [] as Array<any>,
+              timelineStore: null as any
+            }
+        },
+        setup(){
+          const { t } = useI18n({
+            inheritLocale: true
+          })
+          return{
+            t
+          }
+        },
+        async mounted () {
+          if(!this.timelineStore){
+            this.timelineStore = useTimelineStore()
+          }
+          this.timelines = await this.timelineStore.getTimelines(this.$i18n.locale)
+          console.log(this.timelines)
+        },
+        async update () {
+          if(!this.timelineStore){
+            this.timelineStore = useTimelineStore()
+          }
+          this.timelines = await this.timelineStore.getTimelines(this.$i18n.locale)
+          console.log(this.timelines)
+        }
+
+    }
+</script>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+h2{
+    color: white;
+}
+
+/* Set a background color */
+body {
+  background-color: #474e5d;
+  font-family: Helvetica, sans-serif;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  background-color:#6495ed;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -3px;
+}
+
+/* Container around content */
+.container {
+  padding: 10px 40px;
+  position: relative;
+  background-color: white;
+  width: 50%;
+}
+
+/* The circles on the timeline */
+.container::after {
+  content: '';
+  position: absolute;
+  width: 75px;
+  height: 75px;
+  right: -78px;
+  background-color: white;
+  border: 4px solid #aac5f5;
+  top: 15px;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+/* Place the container to the left */
+.left {
+  left: -3%;
+}
+
+/* Place the container to the right */
+.right {
+  left: 53%;
+}
+
+/* Add arrows to the left container (pointing right) */
+.left::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 45px;
+  width: 0;
+  z-index: 1;
+  right: 30px;
+  border: medium solid #aac5f5;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #aac5f5;
+}
+
+/* Add arrows to the right container (pointing left) */
+.right::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 45px;
+  width: 0;
+  z-index: 1;
+  left: 30px;
+  border: medium solid #aac5f5;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent #aac5f5 transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.right::after {
+  left: -76px;
+}
+
+/* The actual content */
+.content {
+  padding: 20px 30px;
+  background-color: #aac5f5;
+  position: relative;
+  border-radius: 6px;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+  .timeline::after {
+    left: 31px;
+  }
+
+/* Full-width containers */
+  .container {
+    width: 100%;
+    padding-left: 70px;
+    padding-right: 25px;
+  }
+
+/* Make sure that all arrows are pointing leftwards */
+  .container::before {
+    left: 60px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+  }
+
+/* Make sure all circles are at the same spot */
+  .left::after, .right::after {
+    left: 15px;
+  }
+
+/* Make all right containers behave like the left ones */
+  .right {
+    left: 0%;
+  }
+}
+</style>

src/i18n.ts

@@ -7,7 +7,7 @@ export const i18n =  createI18n({
     locale: (localStorage.getItem('lang') || 'de'),
     fallbackLocale:  'de',
     messages: {
-        de:de,
-        en:en
+        "de": de,
+        "en": en
     }
-})
+})

src/locales/de.json

@@ -1,7 +1,9 @@
 {
-    "Home":"Home",
-    "About":"Über Uns",
-    "Welcome":"Wilkommen",
+    "Home": "Home",
+    "Tage": "Tage",
+    "Stunden": "Stunden",
+    "Minuten": "Minuten",
+    "Sekunden": "Sekunden",
     "heiraten.title": "WIR HEIRATEN",
     "juli": "JULI"
 }

src/locales/en.json

@@ -1,7 +1,5 @@
 {
-    "Home":"Home",
-    "About":"About",
-    "Welcome":"Welcome",
+    "Home": "Home",
     "Tage": "Days",
     "Stunden": "Hours",
     "Minuten": "Minutes",

src/main.ts

@@ -7,15 +7,19 @@ import { createPinia } from 'pinia'
 // i18n
 import { i18n } from "./i18n";
 import VueCountdown from '@chenfengyuan/vue-countdown';
+import { useFooterLinksStore } from '@/stores/footer-content-pages'
+import { useTimelineStore } from '@/stores/timeline'
+
 
 const pinia = createPinia()
 const app = createApp(App)
-console.log("App.vue")
+
 app.use(pinia)
    .use(i18n)
-
+await useFooterLinksStore().setLocale(localStorage.getItem('lang') || 'de')
+await useTimelineStore().setLocale(localStorage.getItem('lang') || 'de')
 await loadDynamicPages(localStorage.getItem('lang') || 'de')
 app.use(router)
 app.component(VueCountdown.name!, VueCountdown)
-   
+
 app.mount('#app')

src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import logo from '../assets/images/logo-blue.svg'
   import Countdown from '@/components/Countdown.vue';
+  import Timeline from '@/components/Timeline.vue';
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n({
             inheritLocale: true
@@ -10,23 +11,20 @@
 <template>
   <main>
     <div class="components">
-      <div class="component component-bg-top">
-       
-        
-      </div> 
+      <div class="component component-bg-top"> </div>
       <div class="component">
         <h3>{{t("heiraten.title")}}</h3>
         <h2>11 | {{t("juli")}} | 2025</h2>
         <img class="logo lazy" data-original="{{ item.img }}" g
                     v-bind:src="logo" alt="">
       </div>
-      <div class="component component-bg-bottom">
-       
-        
-      </div> 
+      <div class="component component-bg-bottom"> </div>
       <div class="component component-dark">
           <Countdown/>
       </div>
+      <!--<div class="component component-bg-top"> </div>
+      <div class="component"><Timeline/></div>
+      <div class="component component-bg-bottom"> </div>-->
     </div>
   </main>
 </template>
@@ -38,5 +36,5 @@ h3{
 .logo{
   padding-top: 40px;
 }
-  
+
 </style>